
<!doctype html>
<html lang="zh" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
        <meta name="description" content="Content and ambitious, gentle yet firm.">
      
      
        <meta name="author" content="王科文(Wcowin)">
      
      
        <link rel="canonical" href="http://wcowin.work/Mkdocs-Wcowin/blog/websitebeauty/backgroud/">
      
      
        <link rel="prev" href="../shubiao/">
      
      
        <link rel="next" href="../mkpdf/">
      
      
      <link rel="icon" href="https://s2.loli.net/2025/02/12/aE5ovtzAlNTd9Uh.png">
      <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.20">
    
    
      
        <title>背景特效 - Mkdocs中文教程</title>
      
    
    
      <link rel="stylesheet" href="../../../assets/stylesheets/main.e53b48f4.min.css">
      
        
        <link rel="stylesheet" href="../../../assets/stylesheets/palette.06af60db.min.css">
      
      


    
    
      
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="../../../stylesheets/extra.css">
    
      <link rel="stylesheet" href="../../../stylesheets/extra2.css">
    
      <link rel="stylesheet" href="../../../stylesheets/link.css">
    
      <link rel="stylesheet" href="../../../stylesheets/poem.css">
    
      <link rel="stylesheet" href="../../../stylesheets/customize.css">
    
      <link rel="stylesheet" href="../../../stylesheets/ziti.css">
    
      <link rel="stylesheet" href="../../../about/sty/portfolio.css">
    
    <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      
  


  
  

<script id="__analytics">function __md_analytics(){function e(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],e("js",new Date),e("config","G-29HZMNR0KG"),document.addEventListener("DOMContentLoaded",(function(){document.forms.search&&document.forms.search.query.addEventListener("blur",(function(){this.value&&e("event","search",{search_term:this.value})}));document$.subscribe((function(){var t=document.forms.feedback;if(void 0!==t)for(var a of t.querySelectorAll("[type=submit]"))a.addEventListener("click",(function(a){a.preventDefault();var n=document.location.pathname,d=this.getAttribute("data-md-value");e("event","feedback",{page:n,data:d}),t.firstElementChild.disabled=!0;var r=t.querySelector(".md-feedback__note [data-md-value='"+d+"']");r&&(r.hidden=!1)})),t.hidden=!1})),location$.subscribe((function(t){e("config","G-29HZMNR0KG",{page_path:t.pathname})}))}));var t=document.createElement("script");t.async=!0,t.src="https://www.googletagmanager.com/gtag/js?id=G-29HZMNR0KG",document.getElementById("__analytics").insertAdjacentElement("afterEnd",t)}</script>
  
    <script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
  

    
    
    
  </head>
  
  
    
    
      
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#_1" class="md-skip">
          跳转至
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

<header class="md-header" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="页眉">
    <a href="../../.." title="Mkdocs中文教程" class="md-header__button md-logo" aria-label="Mkdocs中文教程" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
  <path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" />
  <path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill-opacity: 0.5" />
  <path d="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" />
  <path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill-opacity: 0.25" />
</svg>

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            Mkdocs中文教程
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              背景特效
            
          </span>
        </div>
      </div>
    </div>
    
      
        <form class="md-header__option" data-md-component="palette">
  
    
    
    
    <input class="md-option" data-md-color-media="(prefers-color-scheme)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo"  aria-label="关闭自动模式"  type="radio" name="__palette" id="__palette_0">
    
      <label class="md-header__button md-icon" title="关闭自动模式" for="__palette_1" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 5-5 5 5 0 0 0-5-5"/></svg>
      </label>
    
  
    
    
    
    <input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="blue" data-md-color-accent="indigo"  aria-label="切换至夜间模式"  type="radio" name="__palette" id="__palette_1">
    
      <label class="md-header__button md-icon" title="切换至夜间模式" for="__palette_2" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h10a5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3"/></svg>
      </label>
    
  
    
    
    
    <input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="indigo"  aria-label="切换至日间模式"  type="radio" name="__palette" id="__palette_2">
    
      <label class="md-header__button md-icon" title="切换至日间模式" for="__palette_0" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6m0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4M7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"/></svg>
      </label>
    
  
</form>
      
    
    
      <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
      <div class="md-header__option">
  <div class="md-select">
    
    <button class="md-header__button md-icon" aria-label="选择当前语言">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M160 0c17.7 0 32 14.3 32 32v32h128c17.7 0 32 14.3 32 32s-14.3 32-32 32h-9.6l-8.4 23.1c-16.4 45.2-41.1 86.5-72.2 122 14.2 8.8 29 16.6 44.4 23.5l50.4 22.4 62.2-140c5.1-11.6 16.6-19 29.2-19s24.1 7.4 29.2 19l128 288c7.2 16.2-.1 35.1-16.2 42.2s-35.1-.1-42.2-16.2l-20-45H337.3l-20 45c-7.2 16.2-26.1 23.4-42.2 16.2s-23.4-26.1-16.2-42.2l39.8-89.5-50.4-22.4c-23-10.2-45-22.4-65.8-36.4-21.3 17.2-44.6 32.2-69.5 44.7l-34.7 17.2c-15.8 7.9-35 1.5-42.9-14.3s-1.5-35 14.3-42.9l34.5-17.3c16.3-8.2 31.8-17.7 46.4-28.3-13.8-12.7-26.8-26.4-38.9-40.9l-10.1-12.2c-11.3-13.6-9.5-33.8 4.1-45.1s33.8-9.5 45.1 4.1l10.2 12.2c11.5 13.9 24.1 26.8 37.4 38.7 27.5-30.4 49.2-66.1 63.5-105.4l.5-1.2H32.1C14.3 128 0 113.7 0 96s14.3-32 32-32h96V32c0-17.7 14.3-32 32-32m256 270.8L365.7 384h100.6z"/></svg>
    </button>
    <div class="md-select__inner">
      <ul class="md-select__list">
        
          <li class="md-select__item">
            <a href="javascript:translateTo('chinese_simplified');" hreflang="zh" class="md-select__link">
              中文
            </a>
          </li>
        
          <li class="md-select__item">
            <a href="javascript:translateTo('english');" hreflang="en" class="md-select__link">
              English
            </a>
          </li>
        
          <li class="md-select__item">
            <a href="javascript:translateTo('japanese');" hreflang="ja" class="md-select__link">
              日本語
            </a>
          </li>
        
      </ul>
    </div>
  </div>
</div>
    
    
      
      
        <label class="md-header__button md-icon" for="__search">
          
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
        </label>
        <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="搜索" placeholder="搜索" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="查找">
        
          <a href="javascript:void(0)" class="md-search__icon md-icon" title="分享" aria-label="分享" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
            
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg>
          </a>
        
        <button type="reset" class="md-search__icon md-icon" title="清空当前内容" aria-label="清空当前内容" tabindex="-1">
          
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
        </button>
      </nav>
      
        <div class="md-search__suggest" data-md-component="search-suggest"></div>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            正在初始化搜索引擎
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
      
    
    
      <div class="md-header__source">
        <a href="https://github.com/Wcowin/Mkdocs-Wcowin" title="前往仓库" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
  </div>
  <div class="md-source__repository">
    Mkdocs-Wcowin
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
            
<nav class="md-tabs" aria-label="标签" data-md-component="tabs">
  <div class="md-grid">
    <ul class="md-tabs__list">
      
        
  
  
  
    
  
  
    
    
      <li class="md-tabs__item md-tabs__item--active">
        <a href="../../MIT/" class="md-tabs__link">
          
  
  
    
  
  MKdocs中文教程

        </a>
      </li>
    
  

      
        
  
  
  
  
    
    
      
  
  
  
  
    
    
      <li class="md-tabs__item">
        <a href="../../../develop/Markdown/markdown/" class="md-tabs__link">
          
  
  
    
  
  建设MKdocs技能指北

        </a>
      </li>
    
  

    
  

      
        
  
  
  
  
    <li class="md-tabs__item">
      <a href="../../../tag/" class="md-tabs__link">
        
  
  
    
  
  标签

      </a>
    </li>
  

      
        
  
  
  
  
    <li class="md-tabs__item">
      <a href="../../../liuyanban/" class="md-tabs__link">
        
  
  
    
  
  留言板

      </a>
    </li>
  

      
        
  
  
  
  
    
    
      <li class="md-tabs__item">
        <a href="../../" class="md-tabs__link">
          
  
  
    
  
  博客

        </a>
      </li>
    
  

      
        
  
  
  
  
    
    
      <li class="md-tabs__item">
        <a href="../../../link/" class="md-tabs__link">
          
  
  
    
  
  友链

        </a>
      </li>
    
  

      
        
  
  
  
  
    
    
      <li class="md-tabs__item">
        <a href="../../../about/geren/" class="md-tabs__link">
          
  
  
    
  
  关于

        </a>
      </li>
    
  

      
        
  
  
  
  
    <li class="md-tabs__item">
      <a href="https://wcowin.work" class="md-tabs__link">
        
  
  
    
  
  个人博客

      </a>
    </li>
  

      
        
  
  
  
  
    <li class="md-tabs__item">
      <a href="https://github.com/new?template_name=Mkdocs-Wcowin&template_owner=Wcowin" class="md-tabs__link">
        
  
  
    
  
  使用本主题

      </a>
    </li>
  

      
    </ul>
  </div>
</nav>
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    


  


<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="导航栏" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../../.." title="Mkdocs中文教程" class="md-nav__button md-logo" aria-label="Mkdocs中文教程" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
  <path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" />
  <path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill-opacity: 0.5" />
  <path d="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" />
  <path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill-opacity: 0.25" />
</svg>

    </a>
    Mkdocs中文教程
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/Wcowin/Mkdocs-Wcowin" title="前往仓库" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
  </div>
  <div class="md-source__repository">
    Mkdocs-Wcowin
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
  
  
    
  
  
  
    
    
      
        
      
        
      
        
      
    
    
    
      
        
        
      
      
        
      
    
    
    <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_1" checked>
        
          
          <label class="md-nav__link" for="__nav_1" id="__nav_1_label" tabindex="">
            
  
  
  <span class="md-ellipsis">
    MKdocs中文教程
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_1_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_1">
            <span class="md-nav__icon md-icon"></span>
            MKdocs中文教程
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../MIT/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    许可声明
    
  </span>
  
    
  
  
    <span class="md-status md-status--new"></span>
  

  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    
    
      
        
      
        
      
        
      
        
      
    
    
    
      
      
        
          
          
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_1_2" >
        
          
          <label class="md-nav__link" for="__nav_1_2" id="__nav_1_2_label" tabindex="">
            
  
  
  <span class="md-ellipsis">
    MKdocs教程(三部曲)
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_1_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_1_2">
            <span class="md-nav__icon md-icon"></span>
            MKdocs教程(三部曲)
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../Mkdocs/mkfirst/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    0.Mkdocs教程前言
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../Mkdocs/mkdocs1/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    1.利用Mkdocs部署静态网页
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../Mkdocs/mkdocs2/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    2.Mkdocs配置说明(mkdocs.yml)
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../Mkdocs/mkdocs3/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    3.解决Github Pages部署mkdocs自定义域名失效的问题
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
              
                
  
  
    
  
  
  
    
    
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    
    
    
      
      
        
          
          
        
      
    
    
    <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_1_3" checked>
        
          
          <label class="md-nav__link" for="__nav_1_3" id="__nav_1_3_label" tabindex="">
            
  
  
  <span class="md-ellipsis">
    Mkdocs美化/补充
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_1_3_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_1_3">
            <span class="md-nav__icon md-icon"></span>
            Mkdocs美化/补充
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../mkdocs-translate/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    为MKdocs添加多语言翻译
    
  </span>
  
    
  
  
    <span class="md-status md-status--new"></span>
  

  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../MkDocs-AI-Summary-plus/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    为MKdocs添加AI摘要(Plus版本)
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../Mkdocs-AI-Summary/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    MkDocs文档AI摘要
    
  </span>
  
    
  
  
    <span class="md-status md-status--new"></span>
  

  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../mkdocs-document-dates/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    MkDocs文档日期插件
    
  </span>
  
    
  
  
    <span class="md-status md-status--new"></span>
  

  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../recommend/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    添加相关推荐文章
    
  </span>
  
    
  
  
    <span class="md-status md-status--new"></span>
  

  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../reading_time/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    添加阅读信息统计
    
  </span>
  
    
  
  
    <span class="md-status md-status--new"></span>
  

  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../Mkdocs/mkdocsblog/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    添加Mkdocs博客
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../Mkdocs/linktech/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    如何给MKdocs添加友链
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../yuanjiaohua/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    网页圆角化设计
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../mkcomments/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    添加评论系统(giscus为例)
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../webtalknow/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    添加在线聊天
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../linktech/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    添加友链
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../header/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    添加顶部公告栏
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../mkdocsfont/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    修改网站字体
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../shubiao/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    JS实现鼠标样式
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
    
  
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  
  <span class="md-ellipsis">
    背景特效
    
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="./" class="md-nav__link md-nav__link--active">
        
  
  
  <span class="md-ellipsis">
    背景特效
    
  </span>
  

      </a>
      
        

<nav class="md-nav md-nav--secondary" aria-label="目录">
  
  
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      目录
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#_1" class="md-nav__link">
    <span class="md-ellipsis">
      雪花❄️
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    <span class="md-ellipsis">
      樱花🌸
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    <span class="md-ellipsis">
      线条
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_4" class="md-nav__link">
    <span class="md-ellipsis">
      粒子
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../mkpdf/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    嵌入PDF文件
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../Relativeaddress/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    相对地址的一些问题
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../404/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    添加404页面
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../time/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    为MKdocs添加文章修订时间戳
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../footer/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    页脚设置
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../accelerate/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    加速网站访问的一些心得
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
      
        
      
        
      
        
      
        
      
        
      
    
    
    
      
      
        
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2" >
        
          
          <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    建设MKdocs技能指北
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2">
            <span class="md-nav__icon md-icon"></span>
            建设MKdocs技能指北
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    
    
      
        
      
        
      
    
    
    
      
      
        
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_1" >
        
          
          <label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    Markdown
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2_1">
            <span class="md-nav__icon md-icon"></span>
            Markdown
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../develop/Markdown/markdown/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Markdown指南
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../develop/Markdown/MWeb/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    MWeb Pro
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../develop/git/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Git 实用技巧
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../develop/lighthouse/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    利用Lighthouse测试网站性能
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../develop/vercel/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    如何将 github pages 迁移到 vercel 上托管
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    
    
      
        
      
        
      
    
    
    
      
      
        
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_5" >
        
          
          <label class="md-nav__link" for="__nav_2_5" id="__nav_2_5_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    设计美学
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2_5">
            <span class="md-nav__icon md-icon"></span>
            设计美学
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../develop/designbeauty/db1/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    唐·诺曼—情感设计的三个层次
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../develop/designbeauty/my-to-desihn/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    我对设计的一些观点
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../tag/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    标签
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../liuyanban/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    留言板
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    
    
      
        
          
        
      
        
      
        
      
    
    
    
      
      
        
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5" >
        
          
          <div class="md-nav__link md-nav__container">
            <a href="../../" class="md-nav__link ">
              
  
  
  <span class="md-ellipsis">
    博客
    
  </span>
  

            </a>
            
              
              <label class="md-nav__link " for="__nav_5" id="__nav_5_label" tabindex="0">
                <span class="md-nav__icon md-icon"></span>
              </label>
            
          </div>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_5">
            <span class="md-nav__icon md-icon"></span>
            博客
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
            
              
                
  
  
  
  
    
    
      
        
      
        
      
        
      
        
      
        
      
    
    
    
      
      
        
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5_2" >
        
          
          <label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    归档
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_5_2">
            <span class="md-nav__icon md-icon"></span>
            归档
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
    
  
  
    <li class="md-nav__item">
      <a href="../../archive/2025/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    2025
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
    
  
  
    <li class="md-nav__item">
      <a href="../../archive/2024/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    2024
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
    
  
  
    <li class="md-nav__item">
      <a href="../../archive/2023/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    2023
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
    
  
  
    <li class="md-nav__item">
      <a href="../../archive/2022/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    2022
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
    
  
  
    <li class="md-nav__item">
      <a href="../../archive/2021/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    2021
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
              
                
  
  
  
  
    
    
      
        
      
        
      
    
    
    
      
      
        
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5_3" >
        
          
          <label class="md-nav__link" for="__nav_5_3" id="__nav_5_3_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    分类
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_3_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_5_3">
            <span class="md-nav__icon md-icon"></span>
            分类
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
    
  
  
    <li class="md-nav__item">
      <a href="../../category/hello-world/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Hello World
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
    
  
  
    <li class="md-nav__item">
      <a href="../../category/%E7%BD%91%E7%AB%99%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    网站更新记录
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
      
        
      
    
    
    
      
      
        
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_6" >
        
          
          <label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    友链
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_6">
            <span class="md-nav__icon md-icon"></span>
            友链
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../link/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    友链
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
      
        
      
        
      
        
      
        
      
    
    
    
      
      
        
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_7" >
        
          
          <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    关于
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_7">
            <span class="md-nav__icon md-icon"></span>
            关于
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../about/geren/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    作者个人简介
    
  </span>
  
    
  
  
    <span class="md-status md-status--new"></span>
  

  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../about/resume/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    个人简历
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../about/zcw/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    支持作者
    
  </span>
  
    
  
  
    <span class="md-status md-status--new"></span>
  

  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../../about/test/" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    功能测试
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="https://wcowin.work" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    个人博客
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="https://github.com/new?template_name=Mkdocs-Wcowin&template_owner=Wcowin" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    使用本主题
    
  </span>
  

      </a>
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="目录">
  
  
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      目录
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#_1" class="md-nav__link">
    <span class="md-ellipsis">
      雪花❄️
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    <span class="md-ellipsis">
      樱花🌸
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    <span class="md-ellipsis">
      线条
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#_4" class="md-nav__link">
    <span class="md-ellipsis">
      粒子
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  

  <nav class="md-tags" >
    
      
      
      
        <a href="../../../tag/#tag:mkdocs" class="md-tag">Mkdocs</a>
      
    
  </nav>


  
    <a href="https://github.com/Wcowin/Mkdocs-Wcowin/edit/main/docs/blog/websitebeauty/backgroud.md" title="编辑此页" class="md-content__button md-icon" rel="edit">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg>
    </a>
  
  
    
      
    
    <a href="https://github.com/Wcowin/Mkdocs-Wcowin/raw/main/docs/blog/websitebeauty/backgroud.md" title="查看本页的源代码" class="md-content__button md-icon">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg>
    </a>
  


  <h1>背景特效</h1>

<div class="admonition abstract">
<p class="admonition-title">⚡ AI摘要 (GLM)</p>
<p>本文介绍了如何通过JavaScript代码在网页中添加背景特效，包括雪花、樱花、线条和粒子。代码通过LocalStorage判断是否显示雪花效果，并动态加载相应的脚本文件。</p>
</div>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>以下代码均在<code>docs/javascripts/extra.js</code>下复制粘贴</p>
</div>
<div id="snowflakes-container"></div>
<script>
  // 在LocalStorage中设置不显示雪花效果的标志
  localStorage.setItem('showSnowflakes', 'true');
</script>

<script>
  // 判断LocalStorage中是否设置了显示雪花效果的标志
  if (localStorage.getItem('showSnowflakes') === 'true') {
    var script = document.createElement('script');
    script.src = 'https://www.lanjie100.com/js/snow.user.js';
    document.head.appendChild(script);
  }
</script>

<h2 id="_1">雪花❄️<a class="headerlink" href="#_1" title="Permanent link">&para;</a></h2>
<div class="admonition tip">
<p class="admonition-title">📖 阅读信息</p>
<p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 20c4.42 0 8-3.58 8-8s-3.58-8-8-8-8 3.58-8 8 3.58 8 8 8m0-18c5.5 0 10 4.5 10 10s-4.5 10-10 10C6.47 22 2 17.5 2 12S6.5 2 12 2m.5 11H11V7h1.5v4.26l3.7-2.13.75 1.3z"/></svg></span>阅读时间：<strong>1</strong> 分钟 | <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10h-2a8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8zm6.78 1a.7.7 0 0 0-.48.2l-1.22 1.21 2.5 2.5L20.8 5.7c.26-.26.26-.7 0-.95L19.25 3.2c-.13-.13-.3-.2-.47-.2m-2.41 2.12L9 12.5V15h2.5l7.37-7.38z"/></svg></span>中文字符：<strong>108</strong> | <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M360.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6m64.6 136.1c-12.5 12.5-12.5 32.8 0 45.3l73.4 73.4-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0zm-274.7 0c-12.5-12.5-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l73.3-73.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg></span>有效代码行数：<strong>374</strong></p>
</div>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1">  1</a></span>
<span class="normal"><a href="#__codelineno-0-2">  2</a></span>
<span class="normal"><a href="#__codelineno-0-3">  3</a></span>
<span class="normal"><a href="#__codelineno-0-4">  4</a></span>
<span class="normal"><a href="#__codelineno-0-5">  5</a></span>
<span class="normal"><a href="#__codelineno-0-6">  6</a></span>
<span class="normal"><a href="#__codelineno-0-7">  7</a></span>
<span class="normal"><a href="#__codelineno-0-8">  8</a></span>
<span class="normal"><a href="#__codelineno-0-9">  9</a></span>
<span class="normal"><a href="#__codelineno-0-10"> 10</a></span>
<span class="normal"><a href="#__codelineno-0-11"> 11</a></span>
<span class="normal"><a href="#__codelineno-0-12"> 12</a></span>
<span class="normal"><a href="#__codelineno-0-13"> 13</a></span>
<span class="normal"><a href="#__codelineno-0-14"> 14</a></span>
<span class="normal"><a href="#__codelineno-0-15"> 15</a></span>
<span class="normal"><a href="#__codelineno-0-16"> 16</a></span>
<span class="normal"><a href="#__codelineno-0-17"> 17</a></span>
<span class="normal"><a href="#__codelineno-0-18"> 18</a></span>
<span class="normal"><a href="#__codelineno-0-19"> 19</a></span>
<span class="normal"><a href="#__codelineno-0-20"> 20</a></span>
<span class="normal"><a href="#__codelineno-0-21"> 21</a></span>
<span class="normal"><a href="#__codelineno-0-22"> 22</a></span>
<span class="normal"><a href="#__codelineno-0-23"> 23</a></span>
<span class="normal"><a href="#__codelineno-0-24"> 24</a></span>
<span class="normal"><a href="#__codelineno-0-25"> 25</a></span>
<span class="normal"><a href="#__codelineno-0-26"> 26</a></span>
<span class="normal"><a href="#__codelineno-0-27"> 27</a></span>
<span class="normal"><a href="#__codelineno-0-28"> 28</a></span>
<span class="normal"><a href="#__codelineno-0-29"> 29</a></span>
<span class="normal"><a href="#__codelineno-0-30"> 30</a></span>
<span class="normal"><a href="#__codelineno-0-31"> 31</a></span>
<span class="normal"><a href="#__codelineno-0-32"> 32</a></span>
<span class="normal"><a href="#__codelineno-0-33"> 33</a></span>
<span class="normal"><a href="#__codelineno-0-34"> 34</a></span>
<span class="normal"><a href="#__codelineno-0-35"> 35</a></span>
<span class="normal"><a href="#__codelineno-0-36"> 36</a></span>
<span class="normal"><a href="#__codelineno-0-37"> 37</a></span>
<span class="normal"><a href="#__codelineno-0-38"> 38</a></span>
<span class="normal"><a href="#__codelineno-0-39"> 39</a></span>
<span class="normal"><a href="#__codelineno-0-40"> 40</a></span>
<span class="normal"><a href="#__codelineno-0-41"> 41</a></span>
<span class="normal"><a href="#__codelineno-0-42"> 42</a></span>
<span class="normal"><a href="#__codelineno-0-43"> 43</a></span>
<span class="normal"><a href="#__codelineno-0-44"> 44</a></span>
<span class="normal"><a href="#__codelineno-0-45"> 45</a></span>
<span class="normal"><a href="#__codelineno-0-46"> 46</a></span>
<span class="normal"><a href="#__codelineno-0-47"> 47</a></span>
<span class="normal"><a href="#__codelineno-0-48"> 48</a></span>
<span class="normal"><a href="#__codelineno-0-49"> 49</a></span>
<span class="normal"><a href="#__codelineno-0-50"> 50</a></span>
<span class="normal"><a href="#__codelineno-0-51"> 51</a></span>
<span class="normal"><a href="#__codelineno-0-52"> 52</a></span>
<span class="normal"><a href="#__codelineno-0-53"> 53</a></span>
<span class="normal"><a href="#__codelineno-0-54"> 54</a></span>
<span class="normal"><a href="#__codelineno-0-55"> 55</a></span>
<span class="normal"><a href="#__codelineno-0-56"> 56</a></span>
<span class="normal"><a href="#__codelineno-0-57"> 57</a></span>
<span class="normal"><a href="#__codelineno-0-58"> 58</a></span>
<span class="normal"><a href="#__codelineno-0-59"> 59</a></span>
<span class="normal"><a href="#__codelineno-0-60"> 60</a></span>
<span class="normal"><a href="#__codelineno-0-61"> 61</a></span>
<span class="normal"><a href="#__codelineno-0-62"> 62</a></span>
<span class="normal"><a href="#__codelineno-0-63"> 63</a></span>
<span class="normal"><a href="#__codelineno-0-64"> 64</a></span>
<span class="normal"><a href="#__codelineno-0-65"> 65</a></span>
<span class="normal"><a href="#__codelineno-0-66"> 66</a></span>
<span class="normal"><a href="#__codelineno-0-67"> 67</a></span>
<span class="normal"><a href="#__codelineno-0-68"> 68</a></span>
<span class="normal"><a href="#__codelineno-0-69"> 69</a></span>
<span class="normal"><a href="#__codelineno-0-70"> 70</a></span>
<span class="normal"><a href="#__codelineno-0-71"> 71</a></span>
<span class="normal"><a href="#__codelineno-0-72"> 72</a></span>
<span class="normal"><a href="#__codelineno-0-73"> 73</a></span>
<span class="normal"><a href="#__codelineno-0-74"> 74</a></span>
<span class="normal"><a href="#__codelineno-0-75"> 75</a></span>
<span class="normal"><a href="#__codelineno-0-76"> 76</a></span>
<span class="normal"><a href="#__codelineno-0-77"> 77</a></span>
<span class="normal"><a href="#__codelineno-0-78"> 78</a></span>
<span class="normal"><a href="#__codelineno-0-79"> 79</a></span>
<span class="normal"><a href="#__codelineno-0-80"> 80</a></span>
<span class="normal"><a href="#__codelineno-0-81"> 81</a></span>
<span class="normal"><a href="#__codelineno-0-82"> 82</a></span>
<span class="normal"><a href="#__codelineno-0-83"> 83</a></span>
<span class="normal"><a href="#__codelineno-0-84"> 84</a></span>
<span class="normal"><a href="#__codelineno-0-85"> 85</a></span>
<span class="normal"><a href="#__codelineno-0-86"> 86</a></span>
<span class="normal"><a href="#__codelineno-0-87"> 87</a></span>
<span class="normal"><a href="#__codelineno-0-88"> 88</a></span>
<span class="normal"><a href="#__codelineno-0-89"> 89</a></span>
<span class="normal"><a href="#__codelineno-0-90"> 90</a></span>
<span class="normal"><a href="#__codelineno-0-91"> 91</a></span>
<span class="normal"><a href="#__codelineno-0-92"> 92</a></span>
<span class="normal"><a href="#__codelineno-0-93"> 93</a></span>
<span class="normal"><a href="#__codelineno-0-94"> 94</a></span>
<span class="normal"><a href="#__codelineno-0-95"> 95</a></span>
<span class="normal"><a href="#__codelineno-0-96"> 96</a></span>
<span class="normal"><a href="#__codelineno-0-97"> 97</a></span>
<span class="normal"><a href="#__codelineno-0-98"> 98</a></span>
<span class="normal"><a href="#__codelineno-0-99"> 99</a></span>
<span class="normal"><a href="#__codelineno-0-100">100</a></span>
<span class="normal"><a href="#__codelineno-0-101">101</a></span>
<span class="normal"><a href="#__codelineno-0-102">102</a></span>
<span class="normal"><a href="#__codelineno-0-103">103</a></span>
<span class="normal"><a href="#__codelineno-0-104">104</a></span>
<span class="normal"><a href="#__codelineno-0-105">105</a></span>
<span class="normal"><a href="#__codelineno-0-106">106</a></span>
<span class="normal"><a href="#__codelineno-0-107">107</a></span>
<span class="normal"><a href="#__codelineno-0-108">108</a></span>
<span class="normal"><a href="#__codelineno-0-109">109</a></span>
<span class="normal"><a href="#__codelineno-0-110">110</a></span>
<span class="normal"><a href="#__codelineno-0-111">111</a></span>
<span class="normal"><a href="#__codelineno-0-112">112</a></span>
<span class="normal"><a href="#__codelineno-0-113">113</a></span>
<span class="normal"><a href="#__codelineno-0-114">114</a></span>
<span class="normal"><a href="#__codelineno-0-115">115</a></span>
<span class="normal"><a href="#__codelineno-0-116">116</a></span>
<span class="normal"><a href="#__codelineno-0-117">117</a></span>
<span class="normal"><a href="#__codelineno-0-118">118</a></span>
<span class="normal"><a href="#__codelineno-0-119">119</a></span>
<span class="normal"><a href="#__codelineno-0-120">120</a></span>
<span class="normal"><a href="#__codelineno-0-121">121</a></span>
<span class="normal"><a href="#__codelineno-0-122">122</a></span>
<span class="normal"><a href="#__codelineno-0-123">123</a></span>
<span class="normal"><a href="#__codelineno-0-124">124</a></span>
<span class="normal"><a href="#__codelineno-0-125">125</a></span>
<span class="normal"><a href="#__codelineno-0-126">126</a></span>
<span class="normal"><a href="#__codelineno-0-127">127</a></span>
<span class="normal"><a href="#__codelineno-0-128">128</a></span>
<span class="normal"><a href="#__codelineno-0-129">129</a></span>
<span class="normal"><a href="#__codelineno-0-130">130</a></span>
<span class="normal"><a href="#__codelineno-0-131">131</a></span>
<span class="normal"><a href="#__codelineno-0-132">132</a></span>
<span class="normal"><a href="#__codelineno-0-133">133</a></span>
<span class="normal"><a href="#__codelineno-0-134">134</a></span>
<span class="normal"><a href="#__codelineno-0-135">135</a></span>
<span class="normal"><a href="#__codelineno-0-136">136</a></span>
<span class="normal"><a href="#__codelineno-0-137">137</a></span>
<span class="normal"><a href="#__codelineno-0-138">138</a></span>
<span class="normal"><a href="#__codelineno-0-139">139</a></span>
<span class="normal"><a href="#__codelineno-0-140">140</a></span>
<span class="normal"><a href="#__codelineno-0-141">141</a></span>
<span class="normal"><a href="#__codelineno-0-142">142</a></span>
<span class="normal"><a href="#__codelineno-0-143">143</a></span>
<span class="normal"><a href="#__codelineno-0-144">144</a></span>
<span class="normal"><a href="#__codelineno-0-145">145</a></span>
<span class="normal"><a href="#__codelineno-0-146">146</a></span>
<span class="normal"><a href="#__codelineno-0-147">147</a></span>
<span class="normal"><a href="#__codelineno-0-148">148</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="c1">//雪花</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a><span class="kd">const</span><span class="w"> </span><span class="nx">fps</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">30</span><span class="p">;</span>
<a id="__codelineno-0-3" name="__codelineno-0-3"></a><span class="kd">const</span><span class="w"> </span><span class="nx">mspf</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="mf">1000</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="nx">fps</span><span class="p">)</span><span class="w"> </span><span class="p">;</span><span class="w"> </span>
<a id="__codelineno-0-4" name="__codelineno-0-4"></a>
<a id="__codelineno-0-5" name="__codelineno-0-5"></a><span class="kd">let</span><span class="w"> </span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">;</span>
<a id="__codelineno-0-6" name="__codelineno-0-6"></a><span class="kd">let</span><span class="w"> </span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientHeight</span><span class="p">;</span>
<a id="__codelineno-0-7" name="__codelineno-0-7"></a><span class="kd">let</span><span class="w"> </span><span class="nx">canvas</span><span class="p">;</span>
<a id="__codelineno-0-8" name="__codelineno-0-8"></a><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;resize&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-9" name="__codelineno-0-9"></a><span class="w">  </span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">;</span>
<a id="__codelineno-0-10" name="__codelineno-0-10"></a><span class="w">  </span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientHeight</span><span class="p">;</span>
<a id="__codelineno-0-11" name="__codelineno-0-11"></a><span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">canvas</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-12" name="__codelineno-0-12"></a><span class="w">    </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">width</span><span class="p">;</span>
<a id="__codelineno-0-13" name="__codelineno-0-13"></a><span class="w">    </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">height</span><span class="p">;</span>
<a id="__codelineno-0-14" name="__codelineno-0-14"></a><span class="w">  </span><span class="p">}</span>
<a id="__codelineno-0-15" name="__codelineno-0-15"></a><span class="p">});</span>
<a id="__codelineno-0-16" name="__codelineno-0-16"></a>
<a id="__codelineno-0-17" name="__codelineno-0-17"></a><span class="kd">let</span><span class="w"> </span><span class="nx">particles</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[];</span>
<a id="__codelineno-0-18" name="__codelineno-0-18"></a><span class="kd">let</span><span class="w"> </span><span class="nx">wind</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">];</span>
<a id="__codelineno-0-19" name="__codelineno-0-19"></a><span class="kd">let</span><span class="w"> </span><span class="nx">cursor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">];</span>
<a id="__codelineno-0-20" name="__codelineno-0-20"></a>
<a id="__codelineno-0-21" name="__codelineno-0-21"></a><span class="kd">function</span><span class="w"> </span><span class="nx">velocity</span><span class="p">(</span><span class="nx">r</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-22" name="__codelineno-0-22"></a><span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="mf">70</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">30</span><span class="p">;</span>
<a id="__codelineno-0-23" name="__codelineno-0-23"></a><span class="p">}</span>
<a id="__codelineno-0-24" name="__codelineno-0-24"></a>
<a id="__codelineno-0-25" name="__codelineno-0-25"></a><span class="kd">function</span><span class="w"> </span><span class="nx">sine_component</span><span class="p">(</span><span class="nx">h</span><span class="p">,</span><span class="w"> </span><span class="nx">a</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-26" name="__codelineno-0-26"></a><span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="p">[</span><span class="mf">2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="nx">h</span><span class="p">,</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">a</span><span class="p">,</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="p">];</span><span class="w"> </span><span class="c1">// [frequency, amplitude, phase]</span>
<a id="__codelineno-0-27" name="__codelineno-0-27"></a><span class="p">}</span>
<a id="__codelineno-0-28" name="__codelineno-0-28"></a>
<a id="__codelineno-0-29" name="__codelineno-0-29"></a><span class="kd">function</span><span class="w"> </span><span class="nx">calc_sine</span><span class="p">(</span><span class="nx">components</span><span class="p">,</span><span class="w"> </span><span class="nx">x</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-30" name="__codelineno-0-30"></a><span class="w">  </span><span class="kd">let</span><span class="w"> </span><span class="nx">sum</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<a id="__codelineno-0-31" name="__codelineno-0-31"></a><span class="w">  </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">components</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-32" name="__codelineno-0-32"></a><span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">f</span><span class="p">,</span><span class="w"> </span><span class="nx">a</span><span class="p">,</span><span class="w"> </span><span class="nx">p</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">components</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<a id="__codelineno-0-33" name="__codelineno-0-33"></a><span class="w">    </span><span class="nx">sum</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">sin</span><span class="p">(</span><span class="nx">x</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">f</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">p</span><span class="p">)</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">a</span><span class="p">;</span>
<a id="__codelineno-0-34" name="__codelineno-0-34"></a><span class="w">  </span><span class="p">}</span>
<a id="__codelineno-0-35" name="__codelineno-0-35"></a><span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="nx">sum</span><span class="p">;</span>
<a id="__codelineno-0-36" name="__codelineno-0-36"></a><span class="p">}</span>
<a id="__codelineno-0-37" name="__codelineno-0-37"></a>
<a id="__codelineno-0-38" name="__codelineno-0-38"></a><span class="kd">function</span><span class="w"> </span><span class="nx">gen_particle</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-39" name="__codelineno-0-39"></a><span class="w">  </span><span class="kd">let</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">4</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span>
<a id="__codelineno-0-40" name="__codelineno-0-40"></a><span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-41" name="__codelineno-0-41"></a><span class="w">    </span><span class="nx">radius</span><span class="o">:</span><span class="w"> </span><span class="nx">r</span><span class="p">,</span>
<a id="__codelineno-0-42" name="__codelineno-0-42"></a><span class="w">    </span><span class="nx">x</span><span class="o">:</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">width</span><span class="p">,</span>
<a id="__codelineno-0-43" name="__codelineno-0-43"></a><span class="w">    </span><span class="nx">y</span><span class="o">:</span><span class="w"> </span><span class="o">-</span><span class="nx">r</span><span class="p">,</span>
<a id="__codelineno-0-44" name="__codelineno-0-44"></a><span class="w">    </span><span class="nx">opacity</span><span class="o">:</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">(),</span>
<a id="__codelineno-0-45" name="__codelineno-0-45"></a><span class="w">    </span><span class="nx">sine_components</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="nx">sine_component</span><span class="p">(</span><span class="nx">height</span><span class="p">,</span><span class="w"> </span><span class="mf">3</span><span class="p">),</span><span class="w"> </span><span class="nx">sine_component</span><span class="p">(</span><span class="nx">height</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="mf">2</span><span class="p">),</span><span class="w"> </span><span class="nx">sine_component</span><span class="p">(</span><span class="nx">height</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">5</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">),</span><span class="w"> </span><span class="nx">sine_component</span><span class="p">(</span><span class="nx">height</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">10</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">)],</span>
<a id="__codelineno-0-46" name="__codelineno-0-46"></a><span class="w">  </span><span class="p">};</span>
<a id="__codelineno-0-47" name="__codelineno-0-47"></a><span class="p">}</span>
<a id="__codelineno-0-48" name="__codelineno-0-48"></a>
<a id="__codelineno-0-49" name="__codelineno-0-49"></a><span class="kd">function</span><span class="w"> </span><span class="nx">update_pos</span><span class="p">(</span><span class="nx">dt</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-50" name="__codelineno-0-50"></a><span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">n</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">particles</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<a id="__codelineno-0-51" name="__codelineno-0-51"></a><span class="w">  </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">n</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-52" name="__codelineno-0-52"></a><span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">v</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">velocity</span><span class="p">(</span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">radius</span><span class="p">);</span>
<a id="__codelineno-0-53" name="__codelineno-0-53"></a><span class="w">    </span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">x</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">calc_sine</span><span class="p">(</span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">sine_components</span><span class="p">,</span><span class="w"> </span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">v</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">5</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">dt</span><span class="p">;</span>
<a id="__codelineno-0-54" name="__codelineno-0-54"></a><span class="w">    </span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">y</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">v</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">dt</span><span class="p">;</span>
<a id="__codelineno-0-55" name="__codelineno-0-55"></a>
<a id="__codelineno-0-56" name="__codelineno-0-56"></a><span class="w">    </span><span class="c1">// const dist = Math.hypot(particles[i].x - cursor[0], particles[i].y - cursor[1]) + 1;</span>
<a id="__codelineno-0-57" name="__codelineno-0-57"></a><span class="w">    </span><span class="c1">// particles[i].x += wind[0] * dt / dist</span>
<a id="__codelineno-0-58" name="__codelineno-0-58"></a><span class="w">    </span><span class="c1">// particles[i].y += wind[1] * dt / dist;</span>
<a id="__codelineno-0-59" name="__codelineno-0-59"></a>
<a id="__codelineno-0-60" name="__codelineno-0-60"></a><span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">radius</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">height</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-61" name="__codelineno-0-61"></a><span class="w">      </span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">gen_particle</span><span class="p">();</span><span class="w">  </span>
<a id="__codelineno-0-62" name="__codelineno-0-62"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-0-63" name="__codelineno-0-63"></a><span class="w">  </span><span class="p">}</span>
<a id="__codelineno-0-64" name="__codelineno-0-64"></a><span class="p">}</span>
<a id="__codelineno-0-65" name="__codelineno-0-65"></a>
<a id="__codelineno-0-66" name="__codelineno-0-66"></a><span class="kd">let</span><span class="w"> </span><span class="nx">context_cache</span><span class="p">;</span>
<a id="__codelineno-0-67" name="__codelineno-0-67"></a><span class="kd">function</span><span class="w"> </span><span class="nx">get_context</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-68" name="__codelineno-0-68"></a><span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">context_cache</span><span class="p">)</span>
<a id="__codelineno-0-69" name="__codelineno-0-69"></a><span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">context_cache</span><span class="p">;</span>
<a id="__codelineno-0-70" name="__codelineno-0-70"></a>
<a id="__codelineno-0-71" name="__codelineno-0-71"></a><span class="w">  </span><span class="nx">canvas</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">);</span>
<a id="__codelineno-0-72" name="__codelineno-0-72"></a><span class="w">  </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">id</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;snow-canvas&#39;</span><span class="p">;</span>
<a id="__codelineno-0-73" name="__codelineno-0-73"></a><span class="w">  </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">width</span><span class="p">;</span>
<a id="__codelineno-0-74" name="__codelineno-0-74"></a><span class="w">  </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">height</span><span class="p">;</span>
<a id="__codelineno-0-75" name="__codelineno-0-75"></a><span class="w">  </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;position: fixed; top: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 256;&#39;</span><span class="p">;</span>
<a id="__codelineno-0-76" name="__codelineno-0-76"></a><span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">((</span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">darkreaderMode</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">).</span><span class="nx">startsWith</span><span class="p">(</span><span class="s1">&#39;filter&#39;</span><span class="p">))</span>
<a id="__codelineno-0-77" name="__codelineno-0-77"></a><span class="w">    </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">filter</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;invert(1)&#39;</span><span class="p">;</span>
<a id="__codelineno-0-78" name="__codelineno-0-78"></a><span class="w">  </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">canvas</span><span class="p">);</span>
<a id="__codelineno-0-79" name="__codelineno-0-79"></a>
<a id="__codelineno-0-80" name="__codelineno-0-80"></a><span class="w">  </span><span class="nx">context_cache</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">);</span>
<a id="__codelineno-0-81" name="__codelineno-0-81"></a><span class="w">  </span><span class="k">return</span><span class="w"> </span><span class="nx">context_cache</span><span class="p">;</span>
<a id="__codelineno-0-82" name="__codelineno-0-82"></a><span class="p">}</span>
<a id="__codelineno-0-83" name="__codelineno-0-83"></a>
<a id="__codelineno-0-84" name="__codelineno-0-84"></a><span class="kd">function</span><span class="w"> </span><span class="nx">draw</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-85" name="__codelineno-0-85"></a><span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">get_context</span><span class="p">();</span>
<a id="__codelineno-0-86" name="__codelineno-0-86"></a>
<a id="__codelineno-0-87" name="__codelineno-0-87"></a><span class="w">  </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">height</span><span class="p">);</span>
<a id="__codelineno-0-88" name="__codelineno-0-88"></a>
<a id="__codelineno-0-89" name="__codelineno-0-89"></a><span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">n</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">particles</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<a id="__codelineno-0-90" name="__codelineno-0-90"></a><span class="w">  </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">n</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-91" name="__codelineno-0-91"></a><span class="w">    </span><span class="kd">const</span><span class="w"> </span><span class="nx">p</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">particles</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<a id="__codelineno-0-92" name="__codelineno-0-92"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fillStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`rgba(255, 255, 255, </span><span class="si">${</span><span class="nx">p</span><span class="p">.</span><span class="nx">opacity</span><span class="si">}</span><span class="sb">)`</span><span class="p">;</span>
<a id="__codelineno-0-93" name="__codelineno-0-93"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">shadowColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;#80EDF7&#39;</span><span class="p">;</span>
<a id="__codelineno-0-94" name="__codelineno-0-94"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">shadowBlur</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">7</span><span class="p">;</span>
<a id="__codelineno-0-95" name="__codelineno-0-95"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">();</span>
<a id="__codelineno-0-96" name="__codelineno-0-96"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">arc</span><span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">p</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span><span class="w"> </span><span class="nx">p</span><span class="p">.</span><span class="nx">radius</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">2</span><span class="o">*</span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="p">);</span>
<a id="__codelineno-0-97" name="__codelineno-0-97"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fill</span><span class="p">();</span>
<a id="__codelineno-0-98" name="__codelineno-0-98"></a><span class="w">  </span><span class="p">}</span>
<a id="__codelineno-0-99" name="__codelineno-0-99"></a><span class="p">}</span>
<a id="__codelineno-0-100" name="__codelineno-0-100"></a>
<a id="__codelineno-0-101" name="__codelineno-0-101"></a><span class="kd">let</span><span class="w"> </span><span class="nx">focused</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
<a id="__codelineno-0-102" name="__codelineno-0-102"></a><span class="kd">let</span><span class="w"> </span><span class="nx">disabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>
<a id="__codelineno-0-103" name="__codelineno-0-103"></a><span class="kd">let</span><span class="w"> </span><span class="nx">lastTime</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<a id="__codelineno-0-104" name="__codelineno-0-104"></a><span class="kd">const</span><span class="w"> </span><span class="nx">requestFrame</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(</span><span class="nx">loop</span><span class="p">,</span><span class="w"> </span><span class="nx">mspf</span><span class="p">);</span>
<a id="__codelineno-0-105" name="__codelineno-0-105"></a><span class="kd">function</span><span class="w"> </span><span class="nx">loop</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-106" name="__codelineno-0-106"></a><span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">dt</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">lastTime</span><span class="p">)</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">1000</span><span class="p">;</span>
<a id="__codelineno-0-107" name="__codelineno-0-107"></a>
<a id="__codelineno-0-108" name="__codelineno-0-108"></a><span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">particles</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">120</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0.1</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-109" name="__codelineno-0-109"></a><span class="w">    </span><span class="nx">particles</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">gen_particle</span><span class="p">());</span>
<a id="__codelineno-0-110" name="__codelineno-0-110"></a><span class="w">  </span><span class="p">}</span>
<a id="__codelineno-0-111" name="__codelineno-0-111"></a>
<a id="__codelineno-0-112" name="__codelineno-0-112"></a><span class="w">  </span><span class="nx">update_pos</span><span class="p">(</span><span class="nx">dt</span><span class="p">);</span>
<a id="__codelineno-0-113" name="__codelineno-0-113"></a><span class="w">  </span><span class="nx">draw</span><span class="p">();</span>
<a id="__codelineno-0-114" name="__codelineno-0-114"></a>
<a id="__codelineno-0-115" name="__codelineno-0-115"></a><span class="w">  </span><span class="nx">lastTime</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<a id="__codelineno-0-116" name="__codelineno-0-116"></a><span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">focused</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="o">!</span><span class="nx">disabled</span><span class="p">)</span>
<a id="__codelineno-0-117" name="__codelineno-0-117"></a><span class="w">    </span><span class="nx">requestFrame</span><span class="p">();</span>
<a id="__codelineno-0-118" name="__codelineno-0-118"></a><span class="p">}</span>
<a id="__codelineno-0-119" name="__codelineno-0-119"></a>
<a id="__codelineno-0-120" name="__codelineno-0-120"></a>
<a id="__codelineno-0-121" name="__codelineno-0-121"></a><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;focus&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-122" name="__codelineno-0-122"></a><span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;snow start&#39;</span><span class="p">);</span>
<a id="__codelineno-0-123" name="__codelineno-0-123"></a><span class="w">  </span><span class="nx">focused</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
<a id="__codelineno-0-124" name="__codelineno-0-124"></a><span class="w">  </span><span class="nx">lastTime</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<a id="__codelineno-0-125" name="__codelineno-0-125"></a><span class="w">  </span><span class="nx">requestFrame</span><span class="p">();</span>
<a id="__codelineno-0-126" name="__codelineno-0-126"></a><span class="p">});</span>
<a id="__codelineno-0-127" name="__codelineno-0-127"></a>
<a id="__codelineno-0-128" name="__codelineno-0-128"></a><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;blur&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-129" name="__codelineno-0-129"></a><span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;snow stop&#39;</span><span class="p">);</span>
<a id="__codelineno-0-130" name="__codelineno-0-130"></a><span class="w">  </span><span class="nx">focused</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>
<a id="__codelineno-0-131" name="__codelineno-0-131"></a><span class="p">});</span>
<a id="__codelineno-0-132" name="__codelineno-0-132"></a>
<a id="__codelineno-0-133" name="__codelineno-0-133"></a><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-134" name="__codelineno-0-134"></a><span class="w">  </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">ctrlKey</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="s1">&#39;s&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-135" name="__codelineno-0-135"></a><span class="w">    </span><span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<a id="__codelineno-0-136" name="__codelineno-0-136"></a><span class="w">    </span><span class="nx">disabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">!</span><span class="nx">disabled</span><span class="p">;</span>
<a id="__codelineno-0-137" name="__codelineno-0-137"></a><span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">disabled</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-138" name="__codelineno-0-138"></a><span class="w">      </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;none&#39;</span><span class="p">;</span>
<a id="__codelineno-0-139" name="__codelineno-0-139"></a><span class="w">    </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-140" name="__codelineno-0-140"></a><span class="w">      </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;block&#39;</span><span class="p">;</span>
<a id="__codelineno-0-141" name="__codelineno-0-141"></a><span class="w">      </span><span class="nx">lastTime</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">performance</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
<a id="__codelineno-0-142" name="__codelineno-0-142"></a><span class="w">      </span><span class="nx">requestFrame</span><span class="p">();</span>
<a id="__codelineno-0-143" name="__codelineno-0-143"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-0-144" name="__codelineno-0-144"></a><span class="w">  </span><span class="p">}</span>
<a id="__codelineno-0-145" name="__codelineno-0-145"></a><span class="p">});</span>
<a id="__codelineno-0-146" name="__codelineno-0-146"></a>
<a id="__codelineno-0-147" name="__codelineno-0-147"></a><span class="nx">requestFrame</span><span class="p">();</span>
<a id="__codelineno-0-148" name="__codelineno-0-148"></a><span class="c1">//雪花</span>
</code></pre></div></td></tr></table></div>
<hr />
<h2 id="_2">樱花🌸<a class="headerlink" href="#_2" title="Permanent link">&para;</a></h2>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-1-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-1-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-1-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-1-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-1-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-1-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-1-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-1-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-1-10">10</a></span>
<span class="normal"><a href="#__codelineno-1-11">11</a></span>
<span class="normal"><a href="#__codelineno-1-12">12</a></span>
<span class="normal"><a href="#__codelineno-1-13">13</a></span>
<span class="normal"><a href="#__codelineno-1-14">14</a></span>
<span class="normal"><a href="#__codelineno-1-15">15</a></span>
<span class="normal"><a href="#__codelineno-1-16">16</a></span>
<span class="normal"><a href="#__codelineno-1-17">17</a></span>
<span class="normal"><a href="#__codelineno-1-18">18</a></span>
<span class="normal"><a href="#__codelineno-1-19">19</a></span>
<span class="normal"><a href="#__codelineno-1-20">20</a></span>
<span class="normal"><a href="#__codelineno-1-21">21</a></span>
<span class="normal"><a href="#__codelineno-1-22">22</a></span>
<span class="normal"><a href="#__codelineno-1-23">23</a></span>
<span class="normal"><a href="#__codelineno-1-24">24</a></span>
<span class="normal"><a href="#__codelineno-1-25">25</a></span>
<span class="normal"><a href="#__codelineno-1-26">26</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="c1">//樱花</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a><span class="nx">Sakura</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">draw</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">cxt</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a><span class="w">    </span><span class="nx">cxt</span><span class="p">.</span><span class="nx">save</span><span class="p">();</span><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">xc</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">40</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">s</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">4</span><span class="p">;</span><span class="w"> </span><span class="nx">cxt</span><span class="p">.</span><span class="nx">translate</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span><span class="w"> </span><span class="nx">cxt</span><span class="p">.</span><span class="nx">rotate</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="p">);</span><span class="w"> </span><span class="nx">cxt</span><span class="p">.</span><span class="nx">drawImage</span><span class="p">(</span><span class="nx">img</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">40</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span><span class="w"> </span><span class="mf">40</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">s</span><span class="p">)</span>
<a id="__codelineno-1-4" name="__codelineno-1-4"></a><span class="w">    </span><span class="nx">cxt</span><span class="p">.</span><span class="nx">restore</span><span class="p">();</span>
<a id="__codelineno-1-5" name="__codelineno-1-5"></a><span class="p">}</span>
<a id="__codelineno-1-6" name="__codelineno-1-6"></a><span class="nx">Sakura</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">update</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">x</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">y</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">r</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="p">);</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;fnr&#39;</span><span class="p">);</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="mf">0.4</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;x&#39;</span><span class="p">);</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">s</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;s&#39;</span><span class="p">);</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;r&#39;</span><span class="p">);</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;y&#39;</span><span class="p">);</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">s</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;s&#39;</span><span class="p">);</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;r&#39;</span><span class="p">);</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-7" name="__codelineno-1-7"></a><span class="nx">SakuraList</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[];</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-8" name="__codelineno-1-8"></a><span class="nx">SakuraList</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">push</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">sakura</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">sakura</span><span class="p">);</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-9" name="__codelineno-1-9"></a><span class="nx">SakuraList</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">update</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">len</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">len</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">update</span><span class="p">();</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-10" name="__codelineno-1-10"></a><span class="nx">SakuraList</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">draw</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">cxt</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">len</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">len</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">draw</span><span class="p">(</span><span class="nx">cxt</span><span class="p">);</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-11" name="__codelineno-1-11"></a><span class="nx">SakuraList</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">get</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-12" name="__codelineno-1-12"></a><span class="nx">SakuraList</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">size</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-13" name="__codelineno-1-13"></a><span class="kd">function</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="nx">option</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-14" name="__codelineno-1-14"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">ret</span><span class="p">,</span><span class="w"> </span><span class="nx">random</span><span class="p">;</span><span class="w"> </span><span class="k">switch</span><span class="w"> </span><span class="p">(</span><span class="nx">option</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-15" name="__codelineno-1-15"></a><span class="w">        </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;x&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span><span class="w"> </span><span class="k">break</span><span class="p">;</span><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;y&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">;</span><span class="w"> </span><span class="k">break</span><span class="p">;</span><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;s&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">();</span><span class="w"> </span><span class="k">break</span><span class="p">;</span><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;r&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">6</span><span class="p">;</span><span class="w"> </span><span class="k">break</span><span class="p">;</span><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;fnx&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">random</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="mf">0.5</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span><span class="w"> </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">x</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">0.5</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">random</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1.7</span><span class="p">;</span><span class="w"> </span><span class="p">};</span><span class="w"> </span><span class="k">break</span><span class="p">;</span><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;fny&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">random</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">1.5</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">0.7</span>
<a id="__codelineno-1-16" name="__codelineno-1-16"></a><span class="w">            </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">y</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">random</span><span class="p">;</span><span class="w"> </span><span class="p">};</span><span class="w"> </span><span class="k">break</span><span class="p">;</span><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="s1">&#39;fnr&#39;</span><span class="o">:</span><span class="w"> </span><span class="nx">random</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">0.03</span><span class="p">;</span><span class="w"> </span><span class="nx">ret</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">r</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">random</span><span class="p">;</span><span class="w"> </span><span class="p">};</span><span class="w"> </span><span class="k">break</span><span class="p">;</span>
<a id="__codelineno-1-17" name="__codelineno-1-17"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-1-18" name="__codelineno-1-18"></a><span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">ret</span><span class="p">;</span>
<a id="__codelineno-1-19" name="__codelineno-1-19"></a><span class="p">}</span>
<a id="__codelineno-1-20" name="__codelineno-1-20"></a><span class="kd">function</span><span class="w"> </span><span class="nx">startSakura</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-21" name="__codelineno-1-21"></a><span class="w">    </span><span class="nx">requestAnimationFrame</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">requestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">mozRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">webkitRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">msRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">oRequestAnimationFrame</span><span class="p">;</span><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">canvas</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">),</span><span class="w"> </span><span class="nx">cxt</span><span class="p">;</span><span class="w"> </span><span class="nx">staticx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">;</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;style&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;position: fixed;left: 0;top: 0;pointer-events: none;&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;id&#39;</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;canvas_sakura&#39;</span><span class="p">);</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">)[</span><span class="mf">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">canvas</span><span class="p">);</span><span class="w"> </span><span class="nx">cxt</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">);</span><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">sakuraList</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">SakuraList</span><span class="p">();</span><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">50</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">sakura</span><span class="p">,</span><span class="w"> </span><span class="nx">randomX</span><span class="p">,</span><span class="w"> </span><span class="nx">randomY</span><span class="p">,</span><span class="w"> </span><span class="nx">randomS</span><span class="p">,</span><span class="w"> </span><span class="nx">randomR</span><span class="p">,</span><span class="w"> </span><span class="nx">randomFnx</span><span class="p">,</span><span class="w"> </span><span class="nx">randomFny</span><span class="p">;</span><span class="w"> </span><span class="nx">randomX</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;x&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">randomY</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;y&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">randomR</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;r&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">randomS</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;s&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">randomFnx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;fnx&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">randomFny</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;fny&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">randomFnR</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">getRandom</span><span class="p">(</span><span class="s1">&#39;fnr&#39;</span><span class="p">);</span><span class="w"> </span><span class="nx">sakura</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Sakura</span><span class="p">(</span><span class="nx">randomX</span><span class="p">,</span><span class="w"> </span><span class="nx">randomY</span><span class="p">,</span><span class="w"> </span><span class="nx">randomS</span><span class="p">,</span><span class="w"> </span><span class="nx">randomR</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">x</span><span class="o">:</span><span class="w"> </span><span class="nx">randomFnx</span><span class="p">,</span><span class="w"> </span><span class="nx">y</span><span class="o">:</span><span class="w"> </span><span class="nx">randomFny</span><span class="p">,</span><span class="w"> </span><span class="nx">r</span><span class="o">:</span><span class="w"> </span><span class="nx">randomFnR</span><span class="w"> </span><span class="p">});</span><span class="w"> </span><span class="nx">sakura</span><span class="p">.</span><span class="nx">draw</span><span class="p">(</span><span class="nx">cxt</span><span class="p">);</span><span class="w"> </span><span class="nx">sakuraList</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">sakura</span><span class="p">);</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-22" name="__codelineno-1-22"></a><span class="w">    </span><span class="nx">stop</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">cxt</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="p">);</span><span class="w"> </span><span class="nx">sakuraList</span><span class="p">.</span><span class="nx">update</span><span class="p">();</span><span class="w"> </span><span class="nx">sakuraList</span><span class="p">.</span><span class="nx">draw</span><span class="p">(</span><span class="nx">cxt</span><span class="p">);</span><span class="w"> </span><span class="nx">stop</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">arguments</span><span class="p">.</span><span class="nx">callee</span><span class="p">);</span><span class="w"> </span><span class="p">})</span>
<a id="__codelineno-1-23" name="__codelineno-1-23"></a><span class="p">}</span>
<a id="__codelineno-1-24" name="__codelineno-1-24"></a><span class="nb">window</span><span class="p">.</span><span class="nx">onresize</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">canvasSnow</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;canvas_snow&#39;</span><span class="p">);</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-25" name="__codelineno-1-25"></a><span class="nx">img</span><span class="p">.</span><span class="nx">onload</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">startSakura</span><span class="p">();</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-1-26" name="__codelineno-1-26"></a><span class="c1">//樱花</span>
</code></pre></div></td></tr></table></div>
<h2 id="_3">线条<a class="headerlink" href="#_3" title="Permanent link">&para;</a></h2>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-2-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-2-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-2-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-2-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-2-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-2-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-2-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-2-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-2-10">10</a></span>
<span class="normal"><a href="#__codelineno-2-11">11</a></span>
<span class="normal"><a href="#__codelineno-2-12">12</a></span>
<span class="normal"><a href="#__codelineno-2-13">13</a></span>
<span class="normal"><a href="#__codelineno-2-14">14</a></span>
<span class="normal"><a href="#__codelineno-2-15">15</a></span>
<span class="normal"><a href="#__codelineno-2-16">16</a></span>
<span class="normal"><a href="#__codelineno-2-17">17</a></span>
<span class="normal"><a href="#__codelineno-2-18">18</a></span>
<span class="normal"><a href="#__codelineno-2-19">19</a></span>
<span class="normal"><a href="#__codelineno-2-20">20</a></span>
<span class="normal"><a href="#__codelineno-2-21">21</a></span>
<span class="normal"><a href="#__codelineno-2-22">22</a></span>
<span class="normal"><a href="#__codelineno-2-23">23</a></span>
<span class="normal"><a href="#__codelineno-2-24">24</a></span>
<span class="normal"><a href="#__codelineno-2-25">25</a></span>
<span class="normal"><a href="#__codelineno-2-26">26</a></span>
<span class="normal"><a href="#__codelineno-2-27">27</a></span>
<span class="normal"><a href="#__codelineno-2-28">28</a></span>
<span class="normal"><a href="#__codelineno-2-29">29</a></span>
<span class="normal"><a href="#__codelineno-2-30">30</a></span>
<span class="normal"><a href="#__codelineno-2-31">31</a></span>
<span class="normal"><a href="#__codelineno-2-32">32</a></span>
<span class="normal"><a href="#__codelineno-2-33">33</a></span>
<span class="normal"><a href="#__codelineno-2-34">34</a></span>
<span class="normal"><a href="#__codelineno-2-35">35</a></span>
<span class="normal"><a href="#__codelineno-2-36">36</a></span>
<span class="normal"><a href="#__codelineno-2-37">37</a></span>
<span class="normal"><a href="#__codelineno-2-38">38</a></span>
<span class="normal"><a href="#__codelineno-2-39">39</a></span>
<span class="normal"><a href="#__codelineno-2-40">40</a></span>
<span class="normal"><a href="#__codelineno-2-41">41</a></span>
<span class="normal"><a href="#__codelineno-2-42">42</a></span>
<span class="normal"><a href="#__codelineno-2-43">43</a></span>
<span class="normal"><a href="#__codelineno-2-44">44</a></span>
<span class="normal"><a href="#__codelineno-2-45">45</a></span>
<span class="normal"><a href="#__codelineno-2-46">46</a></span>
<span class="normal"><a href="#__codelineno-2-47">47</a></span>
<span class="normal"><a href="#__codelineno-2-48">48</a></span>
<span class="normal"><a href="#__codelineno-2-49">49</a></span>
<span class="normal"><a href="#__codelineno-2-50">50</a></span>
<span class="normal"><a href="#__codelineno-2-51">51</a></span>
<span class="normal"><a href="#__codelineno-2-52">52</a></span>
<span class="normal"><a href="#__codelineno-2-53">53</a></span>
<span class="normal"><a href="#__codelineno-2-54">54</a></span>
<span class="normal"><a href="#__codelineno-2-55">55</a></span>
<span class="normal"><a href="#__codelineno-2-56">56</a></span>
<span class="normal"><a href="#__codelineno-2-57">57</a></span>
<span class="normal"><a href="#__codelineno-2-58">58</a></span>
<span class="normal"><a href="#__codelineno-2-59">59</a></span>
<span class="normal"><a href="#__codelineno-2-60">60</a></span>
<span class="normal"><a href="#__codelineno-2-61">61</a></span>
<span class="normal"><a href="#__codelineno-2-62">62</a></span>
<span class="normal"><a href="#__codelineno-2-63">63</a></span>
<span class="normal"><a href="#__codelineno-2-64">64</a></span>
<span class="normal"><a href="#__codelineno-2-65">65</a></span>
<span class="normal"><a href="#__codelineno-2-66">66</a></span>
<span class="normal"><a href="#__codelineno-2-67">67</a></span>
<span class="normal"><a href="#__codelineno-2-68">68</a></span>
<span class="normal"><a href="#__codelineno-2-69">69</a></span>
<span class="normal"><a href="#__codelineno-2-70">70</a></span>
<span class="normal"><a href="#__codelineno-2-71">71</a></span>
<span class="normal"><a href="#__codelineno-2-72">72</a></span>
<span class="normal"><a href="#__codelineno-2-73">73</a></span>
<span class="normal"><a href="#__codelineno-2-74">74</a></span>
<span class="normal"><a href="#__codelineno-2-75">75</a></span>
<span class="normal"><a href="#__codelineno-2-76">76</a></span>
<span class="normal"><a href="#__codelineno-2-77">77</a></span>
<span class="normal"><a href="#__codelineno-2-78">78</a></span>
<span class="normal"><a href="#__codelineno-2-79">79</a></span>
<span class="normal"><a href="#__codelineno-2-80">80</a></span>
<span class="normal"><a href="#__codelineno-2-81">81</a></span>
<span class="normal"><a href="#__codelineno-2-82">82</a></span>
<span class="normal"><a href="#__codelineno-2-83">83</a></span>
<span class="normal"><a href="#__codelineno-2-84">84</a></span>
<span class="normal"><a href="#__codelineno-2-85">85</a></span>
<span class="normal"><a href="#__codelineno-2-86">86</a></span>
<span class="normal"><a href="#__codelineno-2-87">87</a></span>
<span class="normal"><a href="#__codelineno-2-88">88</a></span>
<span class="normal"><a href="#__codelineno-2-89">89</a></span>
<span class="normal"><a href="#__codelineno-2-90">90</a></span>
<span class="normal"><a href="#__codelineno-2-91">91</a></span>
<span class="normal"><a href="#__codelineno-2-92">92</a></span>
<span class="normal"><a href="#__codelineno-2-93">93</a></span>
<span class="normal"><a href="#__codelineno-2-94">94</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="o">!</span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-2" name="__codelineno-2-2"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">o</span><span class="p">(</span><span class="nx">w</span><span class="p">,</span><span class="w"> </span><span class="nx">v</span><span class="p">,</span><span class="w"> </span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-3" name="__codelineno-2-3"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nx">w</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="nx">v</span><span class="p">)</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">i</span>
<a id="__codelineno-2-4" name="__codelineno-2-4"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-2-5" name="__codelineno-2-5"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">j</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-6" name="__codelineno-2-6"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span>
<a id="__codelineno-2-7" name="__codelineno-2-7"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-2-8" name="__codelineno-2-8"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">l</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-9" name="__codelineno-2-9"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">j</span><span class="p">(</span><span class="s2">&quot;script&quot;</span><span class="p">),</span>
<a id="__codelineno-2-10" name="__codelineno-2-10"></a><span class="w">        </span><span class="nx">w</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
<a id="__codelineno-2-11" name="__codelineno-2-11"></a><span class="w">        </span><span class="nx">v</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">[</span><span class="nx">w</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span><span class="p">];</span>
<a id="__codelineno-2-12" name="__codelineno-2-12"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-13" name="__codelineno-2-13"></a><span class="w">            </span><span class="nx">l</span><span class="o">:</span><span class="w"> </span><span class="nx">w</span><span class="p">,</span>
<a id="__codelineno-2-14" name="__codelineno-2-14"></a><span class="w">            </span><span class="nx">z</span><span class="o">:</span><span class="w"> </span><span class="nx">o</span><span class="p">(</span><span class="nx">v</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;zIndex&quot;</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">1</span><span class="p">),</span>
<a id="__codelineno-2-15" name="__codelineno-2-15"></a><span class="w">            </span><span class="nx">o</span><span class="o">:</span><span class="w"> </span><span class="nx">o</span><span class="p">(</span><span class="nx">v</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;opacity&quot;</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">),</span>
<a id="__codelineno-2-16" name="__codelineno-2-16"></a><span class="w">            </span><span class="nx">c</span><span class="o">:</span><span class="w"> </span><span class="nx">o</span><span class="p">(</span><span class="nx">v</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;color&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;0,0,0&quot;</span><span class="p">),</span>
<a id="__codelineno-2-17" name="__codelineno-2-17"></a><span class="w">            </span><span class="nx">n</span><span class="o">:</span><span class="w"> </span><span class="nx">o</span><span class="p">(</span><span class="nx">v</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;count&quot;</span><span class="p">,</span><span class="w"> </span><span class="mf">99</span><span class="p">)</span>
<a id="__codelineno-2-18" name="__codelineno-2-18"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-2-19" name="__codelineno-2-19"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-2-20" name="__codelineno-2-20"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">k</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-21" name="__codelineno-2-21"></a><span class="w">        </span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">u</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientWidth</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">,</span>
<a id="__codelineno-2-22" name="__codelineno-2-22"></a><span class="w">        </span><span class="nx">n</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">u</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientHeight</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">clientHeight</span>
<a id="__codelineno-2-23" name="__codelineno-2-23"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-2-24" name="__codelineno-2-24"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">b</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-25" name="__codelineno-2-25"></a><span class="w">        </span><span class="nx">e</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">r</span><span class="p">,</span><span class="w"> </span><span class="nx">n</span><span class="p">);</span>
<a id="__codelineno-2-26" name="__codelineno-2-26"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">w</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="nx">f</span><span class="p">].</span><span class="nx">concat</span><span class="p">(</span><span class="nx">t</span><span class="p">);</span>
<a id="__codelineno-2-27" name="__codelineno-2-27"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">v</span><span class="p">,</span><span class="w"> </span><span class="nx">A</span><span class="p">,</span><span class="w"> </span><span class="nx">B</span><span class="p">,</span><span class="w"> </span><span class="nx">z</span><span class="p">,</span><span class="w"> </span><span class="nx">y</span><span class="p">;</span>
<a id="__codelineno-2-28" name="__codelineno-2-28"></a><span class="w">        </span><span class="nx">t</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-29" name="__codelineno-2-29"></a><span class="w">            </span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">xa</span><span class="p">,</span>
<a id="__codelineno-2-30" name="__codelineno-2-30"></a><span class="w">            </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">ya</span><span class="p">,</span>
<a id="__codelineno-2-31" name="__codelineno-2-31"></a><span class="w">            </span><span class="nx">i</span><span class="p">.</span><span class="nx">xa</span><span class="w"> </span><span class="o">*=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="o">-</span><span class="mf">1</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<a id="__codelineno-2-32" name="__codelineno-2-32"></a><span class="w">            </span><span class="nx">i</span><span class="p">.</span><span class="nx">ya</span><span class="w"> </span><span class="o">*=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">n</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="o">-</span><span class="mf">1</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<a id="__codelineno-2-33" name="__codelineno-2-33"></a><span class="w">            </span><span class="nx">e</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">0.5</span><span class="p">,</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">0.5</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">);</span>
<a id="__codelineno-2-34" name="__codelineno-2-34"></a><span class="w">            </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">v</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">v</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">w</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="nx">v</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-35" name="__codelineno-2-35"></a><span class="w">                </span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">w</span><span class="p">[</span><span class="nx">v</span><span class="p">];</span>
<a id="__codelineno-2-36" name="__codelineno-2-36"></a><span class="w">                </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">x</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="kc">null</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="kc">null</span><span class="w"> </span><span class="o">!==</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-37" name="__codelineno-2-37"></a><span class="w">                    </span><span class="nx">B</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span>
<a id="__codelineno-2-38" name="__codelineno-2-38"></a><span class="w">                    </span><span class="nx">z</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span>
<a id="__codelineno-2-39" name="__codelineno-2-39"></a><span class="w">                    </span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">B</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">B</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">z</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">z</span><span class="p">;</span>
<a id="__codelineno-2-40" name="__codelineno-2-40"></a><span class="w">                    </span><span class="nx">y</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">max</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">x</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">f</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">y</span><span class="w"> </span><span class="o">&gt;=</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">max</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-=</span><span class="w"> </span><span class="mf">0.03</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">B</span><span class="p">,</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-=</span><span class="w"> </span><span class="mf">0.03</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">z</span><span class="p">),</span><span class="w"> </span><span class="nx">A</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">x</span><span class="p">.</span><span class="nx">max</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">max</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">(),</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">lineWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">A</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">strokeStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;rgba(&quot;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">s</span><span class="p">.</span><span class="nx">c</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">&quot;,&quot;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="p">(</span><span class="nx">A</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">0.2</span><span class="p">)</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">&quot;)&quot;</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">moveTo</span><span class="p">(</span><span class="nx">i</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">y</span><span class="p">),</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">x</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">x</span><span class="p">.</span><span class="nx">y</span><span class="p">),</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">stroke</span><span class="p">())</span>
<a id="__codelineno-2-41" name="__codelineno-2-41"></a><span class="w">                </span><span class="p">}</span>
<a id="__codelineno-2-42" name="__codelineno-2-42"></a><span class="w">            </span><span class="p">}</span>
<a id="__codelineno-2-43" name="__codelineno-2-43"></a><span class="w">            </span><span class="nx">w</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">w</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">i</span><span class="p">),</span><span class="w"> </span><span class="mf">1</span><span class="p">)</span>
<a id="__codelineno-2-44" name="__codelineno-2-44"></a><span class="w">        </span><span class="p">}),</span>
<a id="__codelineno-2-45" name="__codelineno-2-45"></a><span class="w">        </span><span class="nx">m</span><span class="p">(</span><span class="nx">b</span><span class="p">)</span>
<a id="__codelineno-2-46" name="__codelineno-2-46"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-2-47" name="__codelineno-2-47"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">u</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;canvas&quot;</span><span class="p">),</span>
<a id="__codelineno-2-48" name="__codelineno-2-48"></a><span class="w">    </span><span class="nx">s</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">l</span><span class="p">(),</span>
<a id="__codelineno-2-49" name="__codelineno-2-49"></a><span class="w">    </span><span class="nx">c</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;c_n&quot;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">s</span><span class="p">.</span><span class="nx">l</span><span class="p">,</span>
<a id="__codelineno-2-50" name="__codelineno-2-50"></a><span class="w">    </span><span class="nx">e</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">u</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s2">&quot;2d&quot;</span><span class="p">),</span>
<a id="__codelineno-2-51" name="__codelineno-2-51"></a><span class="w">    </span><span class="nx">r</span><span class="p">,</span>
<a id="__codelineno-2-52" name="__codelineno-2-52"></a><span class="w">    </span><span class="nx">n</span><span class="p">,</span>
<a id="__codelineno-2-53" name="__codelineno-2-53"></a><span class="w">    </span><span class="nx">m</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">requestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">webkitRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">mozRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">oRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">msRequestAnimationFrame</span><span class="w"> </span><span class="o">||</span>
<a id="__codelineno-2-54" name="__codelineno-2-54"></a><span class="w">    </span><span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-55" name="__codelineno-2-55"></a><span class="w">        </span><span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span><span class="w"> </span><span class="mf">1000</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">45</span><span class="p">)</span>
<a id="__codelineno-2-56" name="__codelineno-2-56"></a><span class="w">    </span><span class="p">},</span>
<a id="__codelineno-2-57" name="__codelineno-2-57"></a><span class="w">    </span><span class="nx">a</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">,</span>
<a id="__codelineno-2-58" name="__codelineno-2-58"></a><span class="w">    </span><span class="nx">f</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-59" name="__codelineno-2-59"></a><span class="w">        </span><span class="nx">x</span><span class="o">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span>
<a id="__codelineno-2-60" name="__codelineno-2-60"></a><span class="w">        </span><span class="nx">y</span><span class="o">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span>
<a id="__codelineno-2-61" name="__codelineno-2-61"></a><span class="w">        </span><span class="nx">max</span><span class="o">:</span><span class="w"> </span><span class="mf">20000</span>
<a id="__codelineno-2-62" name="__codelineno-2-62"></a><span class="w">    </span><span class="p">};</span>
<a id="__codelineno-2-63" name="__codelineno-2-63"></a><span class="w">    </span><span class="nx">u</span><span class="p">.</span><span class="nx">id</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">c</span><span class="p">;</span>
<a id="__codelineno-2-64" name="__codelineno-2-64"></a><span class="w">    </span><span class="nx">u</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">cssText</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;position:fixed;top:0;left:0;z-index:&quot;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">s</span><span class="p">.</span><span class="nx">z</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">&quot;;opacity:&quot;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">s</span><span class="p">.</span><span class="nx">o</span><span class="p">;</span>
<a id="__codelineno-2-65" name="__codelineno-2-65"></a><span class="w">    </span><span class="nx">j</span><span class="p">(</span><span class="s2">&quot;body&quot;</span><span class="p">)[</span><span class="mf">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">u</span><span class="p">);</span>
<a id="__codelineno-2-66" name="__codelineno-2-66"></a><span class="w">    </span><span class="nx">k</span><span class="p">(),</span>
<a id="__codelineno-2-67" name="__codelineno-2-67"></a><span class="w">    </span><span class="nb">window</span><span class="p">.</span><span class="nx">onresize</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">k</span><span class="p">;</span>
<a id="__codelineno-2-68" name="__codelineno-2-68"></a><span class="w">    </span><span class="nb">window</span><span class="p">.</span><span class="nx">onmousemove</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-69" name="__codelineno-2-69"></a><span class="w">        </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">,</span>
<a id="__codelineno-2-70" name="__codelineno-2-70"></a><span class="w">        </span><span class="nx">f</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">clientX</span><span class="p">,</span>
<a id="__codelineno-2-71" name="__codelineno-2-71"></a><span class="w">        </span><span class="nx">f</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">.</span><span class="nx">clientY</span>
<a id="__codelineno-2-72" name="__codelineno-2-72"></a><span class="w">    </span><span class="p">},</span>
<a id="__codelineno-2-73" name="__codelineno-2-73"></a><span class="w">    </span><span class="nb">window</span><span class="p">.</span><span class="nx">onmouseout</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-74" name="__codelineno-2-74"></a><span class="w">        </span><span class="nx">f</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span>
<a id="__codelineno-2-75" name="__codelineno-2-75"></a><span class="w">        </span><span class="nx">f</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">null</span>
<a id="__codelineno-2-76" name="__codelineno-2-76"></a><span class="w">    </span><span class="p">};</span>
<a id="__codelineno-2-77" name="__codelineno-2-77"></a><span class="w">    </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">t</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[],</span><span class="w"> </span><span class="nx">p</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">s</span><span class="p">.</span><span class="nx">n</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">p</span><span class="p">;</span><span class="w"> </span><span class="nx">p</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-78" name="__codelineno-2-78"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">h</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">a</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">r</span><span class="p">,</span>
<a id="__codelineno-2-79" name="__codelineno-2-79"></a><span class="w">        </span><span class="nx">g</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">a</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">n</span><span class="p">,</span>
<a id="__codelineno-2-80" name="__codelineno-2-80"></a><span class="w">        </span><span class="nx">q</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">a</span><span class="p">()</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span>
<a id="__codelineno-2-81" name="__codelineno-2-81"></a><span class="w">        </span><span class="nx">d</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">a</span><span class="p">()</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span>
<a id="__codelineno-2-82" name="__codelineno-2-82"></a><span class="w">        </span><span class="nx">t</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span>
<a id="__codelineno-2-83" name="__codelineno-2-83"></a><span class="w">            </span><span class="nx">x</span><span class="o">:</span><span class="w"> </span><span class="nx">h</span><span class="p">,</span>
<a id="__codelineno-2-84" name="__codelineno-2-84"></a><span class="w">            </span><span class="nx">y</span><span class="o">:</span><span class="w"> </span><span class="nx">g</span><span class="p">,</span>
<a id="__codelineno-2-85" name="__codelineno-2-85"></a><span class="w">            </span><span class="nx">xa</span><span class="o">:</span><span class="w"> </span><span class="nx">q</span><span class="p">,</span>
<a id="__codelineno-2-86" name="__codelineno-2-86"></a><span class="w">            </span><span class="nx">ya</span><span class="o">:</span><span class="w"> </span><span class="nx">d</span><span class="p">,</span>
<a id="__codelineno-2-87" name="__codelineno-2-87"></a><span class="w">            </span><span class="nx">max</span><span class="o">:</span><span class="w"> </span><span class="mf">6000</span>
<a id="__codelineno-2-88" name="__codelineno-2-88"></a><span class="w">        </span><span class="p">})</span>
<a id="__codelineno-2-89" name="__codelineno-2-89"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-2-90" name="__codelineno-2-90"></a><span class="w">    </span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-91" name="__codelineno-2-91"></a><span class="w">        </span><span class="nx">b</span><span class="p">()</span>
<a id="__codelineno-2-92" name="__codelineno-2-92"></a><span class="w">    </span><span class="p">},</span>
<a id="__codelineno-2-93" name="__codelineno-2-93"></a><span class="w">    </span><span class="mf">100</span><span class="p">)</span>
<a id="__codelineno-2-94" name="__codelineno-2-94"></a><span class="p">}</span><span class="w"> </span><span class="p">();</span>
</code></pre></div></td></tr></table></div>
<h2 id="_4">粒子<a class="headerlink" href="#_4" title="Permanent link">&para;</a></h2>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1">  1</a></span>
<span class="normal"><a href="#__codelineno-3-2">  2</a></span>
<span class="normal"><a href="#__codelineno-3-3">  3</a></span>
<span class="normal"><a href="#__codelineno-3-4">  4</a></span>
<span class="normal"><a href="#__codelineno-3-5">  5</a></span>
<span class="normal"><a href="#__codelineno-3-6">  6</a></span>
<span class="normal"><a href="#__codelineno-3-7">  7</a></span>
<span class="normal"><a href="#__codelineno-3-8">  8</a></span>
<span class="normal"><a href="#__codelineno-3-9">  9</a></span>
<span class="normal"><a href="#__codelineno-3-10"> 10</a></span>
<span class="normal"><a href="#__codelineno-3-11"> 11</a></span>
<span class="normal"><a href="#__codelineno-3-12"> 12</a></span>
<span class="normal"><a href="#__codelineno-3-13"> 13</a></span>
<span class="normal"><a href="#__codelineno-3-14"> 14</a></span>
<span class="normal"><a href="#__codelineno-3-15"> 15</a></span>
<span class="normal"><a href="#__codelineno-3-16"> 16</a></span>
<span class="normal"><a href="#__codelineno-3-17"> 17</a></span>
<span class="normal"><a href="#__codelineno-3-18"> 18</a></span>
<span class="normal"><a href="#__codelineno-3-19"> 19</a></span>
<span class="normal"><a href="#__codelineno-3-20"> 20</a></span>
<span class="normal"><a href="#__codelineno-3-21"> 21</a></span>
<span class="normal"><a href="#__codelineno-3-22"> 22</a></span>
<span class="normal"><a href="#__codelineno-3-23"> 23</a></span>
<span class="normal"><a href="#__codelineno-3-24"> 24</a></span>
<span class="normal"><a href="#__codelineno-3-25"> 25</a></span>
<span class="normal"><a href="#__codelineno-3-26"> 26</a></span>
<span class="normal"><a href="#__codelineno-3-27"> 27</a></span>
<span class="normal"><a href="#__codelineno-3-28"> 28</a></span>
<span class="normal"><a href="#__codelineno-3-29"> 29</a></span>
<span class="normal"><a href="#__codelineno-3-30"> 30</a></span>
<span class="normal"><a href="#__codelineno-3-31"> 31</a></span>
<span class="normal"><a href="#__codelineno-3-32"> 32</a></span>
<span class="normal"><a href="#__codelineno-3-33"> 33</a></span>
<span class="normal"><a href="#__codelineno-3-34"> 34</a></span>
<span class="normal"><a href="#__codelineno-3-35"> 35</a></span>
<span class="normal"><a href="#__codelineno-3-36"> 36</a></span>
<span class="normal"><a href="#__codelineno-3-37"> 37</a></span>
<span class="normal"><a href="#__codelineno-3-38"> 38</a></span>
<span class="normal"><a href="#__codelineno-3-39"> 39</a></span>
<span class="normal"><a href="#__codelineno-3-40"> 40</a></span>
<span class="normal"><a href="#__codelineno-3-41"> 41</a></span>
<span class="normal"><a href="#__codelineno-3-42"> 42</a></span>
<span class="normal"><a href="#__codelineno-3-43"> 43</a></span>
<span class="normal"><a href="#__codelineno-3-44"> 44</a></span>
<span class="normal"><a href="#__codelineno-3-45"> 45</a></span>
<span class="normal"><a href="#__codelineno-3-46"> 46</a></span>
<span class="normal"><a href="#__codelineno-3-47"> 47</a></span>
<span class="normal"><a href="#__codelineno-3-48"> 48</a></span>
<span class="normal"><a href="#__codelineno-3-49"> 49</a></span>
<span class="normal"><a href="#__codelineno-3-50"> 50</a></span>
<span class="normal"><a href="#__codelineno-3-51"> 51</a></span>
<span class="normal"><a href="#__codelineno-3-52"> 52</a></span>
<span class="normal"><a href="#__codelineno-3-53"> 53</a></span>
<span class="normal"><a href="#__codelineno-3-54"> 54</a></span>
<span class="normal"><a href="#__codelineno-3-55"> 55</a></span>
<span class="normal"><a href="#__codelineno-3-56"> 56</a></span>
<span class="normal"><a href="#__codelineno-3-57"> 57</a></span>
<span class="normal"><a href="#__codelineno-3-58"> 58</a></span>
<span class="normal"><a href="#__codelineno-3-59"> 59</a></span>
<span class="normal"><a href="#__codelineno-3-60"> 60</a></span>
<span class="normal"><a href="#__codelineno-3-61"> 61</a></span>
<span class="normal"><a href="#__codelineno-3-62"> 62</a></span>
<span class="normal"><a href="#__codelineno-3-63"> 63</a></span>
<span class="normal"><a href="#__codelineno-3-64"> 64</a></span>
<span class="normal"><a href="#__codelineno-3-65"> 65</a></span>
<span class="normal"><a href="#__codelineno-3-66"> 66</a></span>
<span class="normal"><a href="#__codelineno-3-67"> 67</a></span>
<span class="normal"><a href="#__codelineno-3-68"> 68</a></span>
<span class="normal"><a href="#__codelineno-3-69"> 69</a></span>
<span class="normal"><a href="#__codelineno-3-70"> 70</a></span>
<span class="normal"><a href="#__codelineno-3-71"> 71</a></span>
<span class="normal"><a href="#__codelineno-3-72"> 72</a></span>
<span class="normal"><a href="#__codelineno-3-73"> 73</a></span>
<span class="normal"><a href="#__codelineno-3-74"> 74</a></span>
<span class="normal"><a href="#__codelineno-3-75"> 75</a></span>
<span class="normal"><a href="#__codelineno-3-76"> 76</a></span>
<span class="normal"><a href="#__codelineno-3-77"> 77</a></span>
<span class="normal"><a href="#__codelineno-3-78"> 78</a></span>
<span class="normal"><a href="#__codelineno-3-79"> 79</a></span>
<span class="normal"><a href="#__codelineno-3-80"> 80</a></span>
<span class="normal"><a href="#__codelineno-3-81"> 81</a></span>
<span class="normal"><a href="#__codelineno-3-82"> 82</a></span>
<span class="normal"><a href="#__codelineno-3-83"> 83</a></span>
<span class="normal"><a href="#__codelineno-3-84"> 84</a></span>
<span class="normal"><a href="#__codelineno-3-85"> 85</a></span>
<span class="normal"><a href="#__codelineno-3-86"> 86</a></span>
<span class="normal"><a href="#__codelineno-3-87"> 87</a></span>
<span class="normal"><a href="#__codelineno-3-88"> 88</a></span>
<span class="normal"><a href="#__codelineno-3-89"> 89</a></span>
<span class="normal"><a href="#__codelineno-3-90"> 90</a></span>
<span class="normal"><a href="#__codelineno-3-91"> 91</a></span>
<span class="normal"><a href="#__codelineno-3-92"> 92</a></span>
<span class="normal"><a href="#__codelineno-3-93"> 93</a></span>
<span class="normal"><a href="#__codelineno-3-94"> 94</a></span>
<span class="normal"><a href="#__codelineno-3-95"> 95</a></span>
<span class="normal"><a href="#__codelineno-3-96"> 96</a></span>
<span class="normal"><a href="#__codelineno-3-97"> 97</a></span>
<span class="normal"><a href="#__codelineno-3-98"> 98</a></span>
<span class="normal"><a href="#__codelineno-3-99"> 99</a></span>
<span class="normal"><a href="#__codelineno-3-100">100</a></span>
<span class="normal"><a href="#__codelineno-3-101">101</a></span>
<span class="normal"><a href="#__codelineno-3-102">102</a></span>
<span class="normal"><a href="#__codelineno-3-103">103</a></span>
<span class="normal"><a href="#__codelineno-3-104">104</a></span>
<span class="normal"><a href="#__codelineno-3-105">105</a></span>
<span class="normal"><a href="#__codelineno-3-106">106</a></span>
<span class="normal"><a href="#__codelineno-3-107">107</a></span>
<span class="normal"><a href="#__codelineno-3-108">108</a></span>
<span class="normal"><a href="#__codelineno-3-109">109</a></span>
<span class="normal"><a href="#__codelineno-3-110">110</a></span>
<span class="normal"><a href="#__codelineno-3-111">111</a></span>
<span class="normal"><a href="#__codelineno-3-112">112</a></span>
<span class="normal"><a href="#__codelineno-3-113">113</a></span>
<span class="normal"><a href="#__codelineno-3-114">114</a></span>
<span class="normal"><a href="#__codelineno-3-115">115</a></span>
<span class="normal"><a href="#__codelineno-3-116">116</a></span>
<span class="normal"><a href="#__codelineno-3-117">117</a></span>
<span class="normal"><a href="#__codelineno-3-118">118</a></span>
<span class="normal"><a href="#__codelineno-3-119">119</a></span>
<span class="normal"><a href="#__codelineno-3-120">120</a></span>
<span class="normal"><a href="#__codelineno-3-121">121</a></span>
<span class="normal"><a href="#__codelineno-3-122">122</a></span>
<span class="normal"><a href="#__codelineno-3-123">123</a></span>
<span class="normal"><a href="#__codelineno-3-124">124</a></span>
<span class="normal"><a href="#__codelineno-3-125">125</a></span>
<span class="normal"><a href="#__codelineno-3-126">126</a></span>
<span class="normal"><a href="#__codelineno-3-127">127</a></span>
<span class="normal"><a href="#__codelineno-3-128">128</a></span>
<span class="normal"><a href="#__codelineno-3-129">129</a></span>
<span class="normal"><a href="#__codelineno-3-130">130</a></span>
<span class="normal"><a href="#__codelineno-3-131">131</a></span>
<span class="normal"><a href="#__codelineno-3-132">132</a></span>
<span class="normal"><a href="#__codelineno-3-133">133</a></span>
<span class="normal"><a href="#__codelineno-3-134">134</a></span>
<span class="normal"><a href="#__codelineno-3-135">135</a></span>
<span class="normal"><a href="#__codelineno-3-136">136</a></span>
<span class="normal"><a href="#__codelineno-3-137">137</a></span>
<span class="normal"><a href="#__codelineno-3-138">138</a></span>
<span class="normal"><a href="#__codelineno-3-139">139</a></span>
<span class="normal"><a href="#__codelineno-3-140">140</a></span>
<span class="normal"><a href="#__codelineno-3-141">141</a></span>
<span class="normal"><a href="#__codelineno-3-142">142</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a><span class="cm">/*背景*/</span>
<a id="__codelineno-3-2" name="__codelineno-3-2"></a><span class="nb">window</span><span class="p">.</span><span class="nx">onload</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-3" name="__codelineno-3-3"></a><span class="w">    </span><span class="c1">//定义body的margin由默认值8px-&gt;0px</span>
<a id="__codelineno-3-4" name="__codelineno-3-4"></a><span class="w">    </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">margin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;0&quot;</span><span class="p">;</span>
<a id="__codelineno-3-5" name="__codelineno-3-5"></a><span class="w">    </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">background</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;255,255,255&quot;</span><span class="p">;</span>
<a id="__codelineno-3-6" name="__codelineno-3-6"></a><span class="w">    </span><span class="c1">//创建canvas画布</span>
<a id="__codelineno-3-7" name="__codelineno-3-7"></a><span class="w">    </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">));</span>
<a id="__codelineno-3-8" name="__codelineno-3-8"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">canvas</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">),</span>
<a id="__codelineno-3-9" name="__codelineno-3-9"></a><span class="w">        </span><span class="nx">ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">)</span><span class="w"> </span><span class="c1">//ctx返回一个在canvas上画图的api/dom</span>
<a id="__codelineno-3-10" name="__codelineno-3-10"></a><span class="w">    </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span>
<a id="__codelineno-3-11" name="__codelineno-3-11"></a><span class="w">    </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">;</span>
<a id="__codelineno-3-12" name="__codelineno-3-12"></a><span class="w">    </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">position</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;fixed&#39;</span><span class="p">;</span>
<a id="__codelineno-3-13" name="__codelineno-3-13"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">lineWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">.3</span><span class="p">;</span>
<a id="__codelineno-3-14" name="__codelineno-3-14"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">strokeStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="ow">new</span><span class="w"> </span><span class="nx">Color</span><span class="p">(</span><span class="mf">150</span><span class="p">)).</span><span class="nx">style</span><span class="p">;</span>
<a id="__codelineno-3-15" name="__codelineno-3-15"></a><span class="w">    </span><span class="c1">//定义鼠标覆盖范围</span>
<a id="__codelineno-3-16" name="__codelineno-3-16"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">mousePosition</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-17" name="__codelineno-3-17"></a><span class="w">        </span><span class="nx">x</span><span class="o">:</span><span class="w"> </span><span class="mf">30</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">100</span><span class="p">,</span>
<a id="__codelineno-3-18" name="__codelineno-3-18"></a><span class="w">        </span><span class="nx">y</span><span class="o">:</span><span class="w"> </span><span class="mf">30</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">100</span>
<a id="__codelineno-3-19" name="__codelineno-3-19"></a><span class="w">    </span><span class="p">};</span>
<a id="__codelineno-3-20" name="__codelineno-3-20"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">dots</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-21" name="__codelineno-3-21"></a><span class="w">        </span><span class="nx">nb</span><span class="o">:</span><span class="w"> </span><span class="mf">1000</span><span class="p">,</span><span class="c1">//Dot的总数</span>
<a id="__codelineno-3-22" name="__codelineno-3-22"></a><span class="w">        </span><span class="nx">distance</span><span class="o">:</span><span class="w"> </span><span class="mf">50</span><span class="p">,</span>
<a id="__codelineno-3-23" name="__codelineno-3-23"></a><span class="w">        </span><span class="nx">d_radius</span><span class="o">:</span><span class="w"> </span><span class="mf">100</span><span class="p">,</span>
<a id="__codelineno-3-24" name="__codelineno-3-24"></a><span class="w">        </span><span class="nx">array</span><span class="o">:</span><span class="w"> </span><span class="p">[]</span>
<a id="__codelineno-3-25" name="__codelineno-3-25"></a><span class="w">    </span><span class="p">};</span>
<a id="__codelineno-3-26" name="__codelineno-3-26"></a><span class="w">    </span><span class="c1">//创建颜色类，Color类返回字符串型rgba（*,*,*,.8）</span>
<a id="__codelineno-3-27" name="__codelineno-3-27"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">mixComponents</span><span class="p">(</span><span class="nx">comp1</span><span class="p">,</span><span class="w"> </span><span class="nx">weight1</span><span class="p">,</span><span class="w"> </span><span class="nx">comp2</span><span class="p">,</span><span class="w"> </span><span class="nx">weight2</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-28" name="__codelineno-3-28"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="p">(</span><span class="nx">comp1</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">weight1</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">comp2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">weight2</span><span class="p">)</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="p">(</span><span class="nx">weight1</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">weight2</span><span class="p">);</span>
<a id="__codelineno-3-29" name="__codelineno-3-29"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-30" name="__codelineno-3-30"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">averageColorStyles</span><span class="p">(</span><span class="nx">dot1</span><span class="p">,</span><span class="w"> </span><span class="nx">dot2</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-31" name="__codelineno-3-31"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">color1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dot1</span><span class="p">.</span><span class="nx">color</span><span class="p">,</span>
<a id="__codelineno-3-32" name="__codelineno-3-32"></a><span class="w">            </span><span class="nx">color2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dot2</span><span class="p">.</span><span class="nx">color</span><span class="p">;</span>
<a id="__codelineno-3-33" name="__codelineno-3-33"></a>
<a id="__codelineno-3-34" name="__codelineno-3-34"></a><span class="w">        </span><span class="kd">var</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">mixComponents</span><span class="p">(</span><span class="nx">color1</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span><span class="w"> </span><span class="nx">dot1</span><span class="p">.</span><span class="nx">radius</span><span class="p">,</span><span class="w"> </span><span class="nx">color2</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span><span class="w"> </span><span class="nx">dot2</span><span class="p">.</span><span class="nx">radius</span><span class="p">),</span>
<a id="__codelineno-3-35" name="__codelineno-3-35"></a><span class="w">            </span><span class="nx">g</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">mixComponents</span><span class="p">(</span><span class="nx">color1</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span><span class="w"> </span><span class="nx">dot1</span><span class="p">.</span><span class="nx">radius</span><span class="p">,</span><span class="w"> </span><span class="nx">color2</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span><span class="w"> </span><span class="nx">dot2</span><span class="p">.</span><span class="nx">radius</span><span class="p">),</span>
<a id="__codelineno-3-36" name="__codelineno-3-36"></a><span class="w">            </span><span class="nx">b</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">mixComponents</span><span class="p">(</span><span class="nx">color1</span><span class="p">.</span><span class="nx">b</span><span class="p">,</span><span class="w"> </span><span class="nx">dot1</span><span class="p">.</span><span class="nx">radius</span><span class="p">,</span><span class="w"> </span><span class="nx">color2</span><span class="p">.</span><span class="nx">b</span><span class="p">,</span><span class="w"> </span><span class="nx">dot2</span><span class="p">.</span><span class="nx">radius</span><span class="p">);</span>
<a id="__codelineno-3-37" name="__codelineno-3-37"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nx">createColorStyle</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">r</span><span class="p">),</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">g</span><span class="p">),</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">b</span><span class="p">));</span>
<a id="__codelineno-3-38" name="__codelineno-3-38"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-39" name="__codelineno-3-39"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">colorValue</span><span class="p">(</span><span class="nx">min</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-40" name="__codelineno-3-40"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">255</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">min</span><span class="p">);</span>
<a id="__codelineno-3-41" name="__codelineno-3-41"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-42" name="__codelineno-3-42"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">createColorStyle</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span><span class="w"> </span><span class="nx">g</span><span class="p">,</span><span class="w"> </span><span class="nx">b</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-43" name="__codelineno-3-43"></a><span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="s1">&#39;rgba(&#39;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">&#39;,&#39;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">g</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">&#39;,&#39;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">b</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">&#39;, 0.8)&#39;</span><span class="p">;</span>
<a id="__codelineno-3-44" name="__codelineno-3-44"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-45" name="__codelineno-3-45"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">Color</span><span class="p">(</span><span class="nx">min</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-46" name="__codelineno-3-46"></a><span class="w">        </span><span class="nx">min</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">min</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<a id="__codelineno-3-47" name="__codelineno-3-47"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">colorValue</span><span class="p">(</span><span class="nx">min</span><span class="p">);</span>
<a id="__codelineno-3-48" name="__codelineno-3-48"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">g</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">colorValue</span><span class="p">(</span><span class="nx">min</span><span class="p">);</span>
<a id="__codelineno-3-49" name="__codelineno-3-49"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">b</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">colorValue</span><span class="p">(</span><span class="nx">min</span><span class="p">);</span>
<a id="__codelineno-3-50" name="__codelineno-3-50"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">createColorStyle</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">b</span><span class="p">);</span>
<a id="__codelineno-3-51" name="__codelineno-3-51"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-52" name="__codelineno-3-52"></a><span class="w">    </span><span class="c1">//创建Dot类以及一系列方法</span>
<a id="__codelineno-3-53" name="__codelineno-3-53"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">Dot</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-54" name="__codelineno-3-54"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>
<a id="__codelineno-3-55" name="__codelineno-3-55"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="p">;</span>
<a id="__codelineno-3-56" name="__codelineno-3-56"></a>
<a id="__codelineno-3-57" name="__codelineno-3-57"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">vx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="mf">.5</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">();</span>
<a id="__codelineno-3-58" name="__codelineno-3-58"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">vy</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="mf">.5</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">();</span>
<a id="__codelineno-3-59" name="__codelineno-3-59"></a>
<a id="__codelineno-3-60" name="__codelineno-3-60"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">radius</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">2</span><span class="p">;</span>
<a id="__codelineno-3-61" name="__codelineno-3-61"></a>
<a id="__codelineno-3-62" name="__codelineno-3-62"></a><span class="w">        </span><span class="k">this</span><span class="p">.</span><span class="nx">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Color</span><span class="p">();</span>
<a id="__codelineno-3-63" name="__codelineno-3-63"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-64" name="__codelineno-3-64"></a>
<a id="__codelineno-3-65" name="__codelineno-3-65"></a><span class="w">    </span><span class="nx">Dot</span><span class="p">.</span><span class="nx">prototype</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-66" name="__codelineno-3-66"></a><span class="w">        </span><span class="nx">draw</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-67" name="__codelineno-3-67"></a><span class="w">            </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">();</span>
<a id="__codelineno-3-68" name="__codelineno-3-68"></a><span class="w">            </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fillStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">color</span><span class="p">.</span><span class="nx">style</span><span class="p">;</span>
<a id="__codelineno-3-69" name="__codelineno-3-69"></a><span class="w">            </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">arc</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">radius</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="kc">false</span><span class="p">);</span>
<a id="__codelineno-3-70" name="__codelineno-3-70"></a><span class="w">            </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fill</span><span class="p">();</span>
<a id="__codelineno-3-71" name="__codelineno-3-71"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-3-72" name="__codelineno-3-72"></a><span class="w">    </span><span class="p">};</span>
<a id="__codelineno-3-73" name="__codelineno-3-73"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">moveDots</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="c1">//Dot对象的移动</span>
<a id="__codelineno-3-74" name="__codelineno-3-74"></a><span class="w">        </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">nb</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-75" name="__codelineno-3-75"></a>
<a id="__codelineno-3-76" name="__codelineno-3-76"></a><span class="w">            </span><span class="kd">var</span><span class="w"> </span><span class="nx">dot</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">array</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<a id="__codelineno-3-77" name="__codelineno-3-77"></a>
<a id="__codelineno-3-78" name="__codelineno-3-78"></a><span class="w">            </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-79" name="__codelineno-3-79"></a><span class="w">                </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vx</span><span class="p">;</span>
<a id="__codelineno-3-80" name="__codelineno-3-80"></a><span class="w">                </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vy</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vy</span><span class="p">;</span>
<a id="__codelineno-3-81" name="__codelineno-3-81"></a><span class="w">            </span><span class="p">}</span>
<a id="__codelineno-3-82" name="__codelineno-3-82"></a><span class="w">            </span><span class="k">else</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-83" name="__codelineno-3-83"></a><span class="w">                </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vx</span><span class="p">;</span>
<a id="__codelineno-3-84" name="__codelineno-3-84"></a><span class="w">                </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vy</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vy</span><span class="p">;</span>
<a id="__codelineno-3-85" name="__codelineno-3-85"></a><span class="w">            </span><span class="p">}</span>
<a id="__codelineno-3-86" name="__codelineno-3-86"></a><span class="w">            </span><span class="nx">dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vx</span><span class="p">;</span>
<a id="__codelineno-3-87" name="__codelineno-3-87"></a><span class="w">            </span><span class="nx">dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="nx">dot</span><span class="p">.</span><span class="nx">vy</span><span class="p">;</span>
<a id="__codelineno-3-88" name="__codelineno-3-88"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-3-89" name="__codelineno-3-89"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-90" name="__codelineno-3-90"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">connectDots</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="c1">//DOt对象的连接</span>
<a id="__codelineno-3-91" name="__codelineno-3-91"></a><span class="w">        </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">nb</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-92" name="__codelineno-3-92"></a><span class="w">            </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">j</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="p">;</span><span class="w"> </span><span class="nx">j</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">nb</span><span class="p">;</span><span class="w"> </span><span class="nx">j</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-93" name="__codelineno-3-93"></a><span class="w">                </span><span class="nx">i_dot</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">array</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<a id="__codelineno-3-94" name="__codelineno-3-94"></a><span class="w">                </span><span class="nx">j_dot</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">array</span><span class="p">[</span><span class="nx">j</span><span class="p">];</span>
<a id="__codelineno-3-95" name="__codelineno-3-95"></a>
<a id="__codelineno-3-96" name="__codelineno-3-96"></a><span class="w">                </span><span class="k">if</span><span class="w"> </span><span class="p">((</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">j_dot</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">distance</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">j_dot</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">distance</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">j_dot</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">distance</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">j_dot</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">distance</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-97" name="__codelineno-3-97"></a><span class="w">                    </span><span class="k">if</span><span class="w"> </span><span class="p">((</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">d_radius</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">d_radius</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">x</span><span class="p">)</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">d_radius</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">d_radius</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-98" name="__codelineno-3-98"></a><span class="w">                        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">();</span>
<a id="__codelineno-3-99" name="__codelineno-3-99"></a><span class="w">                        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">strokeStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">averageColorStyles</span><span class="p">(</span><span class="nx">i_dot</span><span class="p">,</span><span class="w"> </span><span class="nx">j_dot</span><span class="p">);</span>
<a id="__codelineno-3-100" name="__codelineno-3-100"></a><span class="w">                        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">moveTo</span><span class="p">(</span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">i_dot</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>
<a id="__codelineno-3-101" name="__codelineno-3-101"></a><span class="w">                        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">j_dot</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">j_dot</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>
<a id="__codelineno-3-102" name="__codelineno-3-102"></a><span class="w">                        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">stroke</span><span class="p">();</span><span class="c1">//绘制定义的路线</span>
<a id="__codelineno-3-103" name="__codelineno-3-103"></a><span class="w">                        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">closePath</span><span class="p">();</span><span class="c1">//创建从当前点回到起始点的路径</span>
<a id="__codelineno-3-104" name="__codelineno-3-104"></a><span class="w">                    </span><span class="p">}</span>
<a id="__codelineno-3-105" name="__codelineno-3-105"></a><span class="w">                </span><span class="p">}</span>
<a id="__codelineno-3-106" name="__codelineno-3-106"></a><span class="w">            </span><span class="p">}</span>
<a id="__codelineno-3-107" name="__codelineno-3-107"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-3-108" name="__codelineno-3-108"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-109" name="__codelineno-3-109"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">createDots</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="c1">//创建nb个Dot对象</span>
<a id="__codelineno-3-110" name="__codelineno-3-110"></a><span class="w">        </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">nb</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-111" name="__codelineno-3-111"></a><span class="w">            </span><span class="nx">dots</span><span class="p">.</span><span class="nx">array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="ow">new</span><span class="w"> </span><span class="nx">Dot</span><span class="p">());</span>
<a id="__codelineno-3-112" name="__codelineno-3-112"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-3-113" name="__codelineno-3-113"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-114" name="__codelineno-3-114"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">drawDots</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="c1">//引用Dot原型链，使用draw方法，在canvas上画出Dot对象</span>
<a id="__codelineno-3-115" name="__codelineno-3-115"></a><span class="w">        </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">nb</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-116" name="__codelineno-3-116"></a><span class="w">            </span><span class="kd">var</span><span class="w"> </span><span class="nx">dot</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dots</span><span class="p">.</span><span class="nx">array</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<a id="__codelineno-3-117" name="__codelineno-3-117"></a><span class="w">            </span><span class="nx">dot</span><span class="p">.</span><span class="nx">draw</span><span class="p">();</span>
<a id="__codelineno-3-118" name="__codelineno-3-118"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-3-119" name="__codelineno-3-119"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-120" name="__codelineno-3-120"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">animateDots</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-121" name="__codelineno-3-121"></a><span class="w">        </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="p">);</span><span class="c1">//清除画布，否则线条会连在一起</span>
<a id="__codelineno-3-122" name="__codelineno-3-122"></a><span class="w">        </span><span class="nx">moveDots</span><span class="p">();</span>
<a id="__codelineno-3-123" name="__codelineno-3-123"></a><span class="w">        </span><span class="nx">connectDots</span><span class="p">();</span>
<a id="__codelineno-3-124" name="__codelineno-3-124"></a><span class="w">        </span><span class="nx">drawDots</span><span class="p">();</span>
<a id="__codelineno-3-125" name="__codelineno-3-125"></a><span class="w">        </span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">animateDots</span><span class="p">);</span>
<a id="__codelineno-3-126" name="__codelineno-3-126"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-3-127" name="__codelineno-3-127"></a><span class="w">    </span><span class="nx">createDots</span><span class="p">();</span><span class="c1">//使用创建Dot类函数</span>
<a id="__codelineno-3-128" name="__codelineno-3-128"></a><span class="w">    </span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">animateDots</span><span class="p">);</span><span class="c1">//使用canvas独有的60Hz刷新屏幕画布的方法</span>
<a id="__codelineno-3-129" name="__codelineno-3-129"></a>
<a id="__codelineno-3-130" name="__codelineno-3-130"></a><span class="w">    </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-131" name="__codelineno-3-131"></a><span class="w">        </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span><span class="p">;</span>
<a id="__codelineno-3-132" name="__codelineno-3-132"></a><span class="w">        </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">pageY</span><span class="p">;</span>
<a id="__codelineno-3-133" name="__codelineno-3-133"></a><span class="w">    </span><span class="p">})</span>
<a id="__codelineno-3-134" name="__codelineno-3-134"></a>
<a id="__codelineno-3-135" name="__codelineno-3-135"></a><span class="w">    </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;mouseleave&#39;</span><span class="p">,</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="c1">//鼠标离开时，连接自动返回到画布中心</span>
<a id="__codelineno-3-136" name="__codelineno-3-136"></a><span class="w">        </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">width</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="p">;</span>
<a id="__codelineno-3-137" name="__codelineno-3-137"></a><span class="w">        </span><span class="nx">mousePosition</span><span class="p">.</span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">canvas</span><span class="p">.</span><span class="nx">height</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="p">;</span>
<a id="__codelineno-3-138" name="__codelineno-3-138"></a><span class="w">    </span><span class="p">})</span>
<a id="__codelineno-3-139" name="__codelineno-3-139"></a>
<a id="__codelineno-3-140" name="__codelineno-3-140"></a><span class="p">}</span>
<a id="__codelineno-3-141" name="__codelineno-3-141"></a>
<a id="__codelineno-3-142" name="__codelineno-3-142"></a><span class="cm">/*背景end*/</span>
</code></pre></div></td></tr></table></div>
<style>
.related-posts {
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0,0,0,0.1);
  max-height: none !important; /* 防止Safari错误计算高度 */
  overflow: visible !important; /* 防止内容被截断 */
}
.related-posts h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
}
.related-posts ul {
  margin: 0 0 0.5rem 0 !important; /* 强制覆盖可能的冲突样式 */
  padding-left: 1.5rem;
  list-style-position: outside;
}
.related-posts li {
  margin-bottom: 0.25rem;
  line-height: 1.4;
}
/* 暗色模式适配 */
[data-md-color-scheme="slate"] .related-posts {
  border-top-color: rgba(255,255,255,0.1);
}
/* Safari特定修复 */
@supports (-webkit-hyphens:none) {
  .related-posts {
    display: block;
    position: relative;
    height: auto !important;
  }
  .related-posts ul {
    position: static;
  }
}
</style>
<div class="related-posts">
<h3>📚 相关文章推荐</h3>
<ul>
<li><a href="/Mkdocs-Wcowin/blog/websitebeauty/shubiao/">JS实现鼠标样式</a></li>
<li><a href="/Mkdocs-Wcowin/blog/websitebeauty/mkdocs-document-dates/">MkDocs文档日期插件</a></li>
<li><a href="/Mkdocs-Wcowin/blog/websitebeauty/accelerate/">加速网站访问的一些心得</a></li>
<li><a href="/Mkdocs-Wcowin/blog/websitebeauty/mkdocs-translate/">为MKdocs添加多语言翻译</a></li>
<li><a href="/Mkdocs-Wcowin/blog/websitebeauty/Relativeaddress/">相对地址的一些问题</a></li>
</ul>
</div>

<!-- Twikoo 评论系统 -->
<div class="twikoo-container" style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.1);">
    <h3 style="margin-bottom: 1rem; font-size: 1.2rem; font-weight: 500;">💬 评论</h3>
    <div id="tcomment" class="loading" style="min-height: 200px;">
        <p style="text-align: center; color: #666; padding: 2rem;">评论系统加载中...</p>
    </div>
</div>

<style>
.twikoo-container {
    max-width: 100%;
}

/* 暗色模式适配 */
[data-md-color-scheme="slate"] .twikoo-container {
    border-top-color: rgba(255,255,255,0.1);
}

/* 加载状态样式 */
#tcomment.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
}

[data-md-color-scheme="slate"] #tcomment.loading {
    background: rgba(255,255,255,0.05);
}
</style>

<script>
(function() {
    // 防止重复加载
    if (window.twikooLoaded) {
        return;
    }

    function loadTwikoo() {
        // 检查是否已经加载过 Twikoo
        if (window.twikoo) {
            initTwikoo();
            return;
        }

        const script = document.createElement('script');
        script.src = 'https://registry.npmmirror.com/twikoo/1.6.44/files/dist/twikoo.min.js';
        script.onload = function() {
            console.log('Twikoo 脚本加载成功');
            initTwikoo();
        };
        script.onerror = function() {
            console.error('Twikoo 脚本加载失败');
            const commentEl = document.getElementById('tcomment');
            if (commentEl) {
                commentEl.classList.remove('loading');
                commentEl.innerHTML = '<p style="text-align: center; color: #f56565; padding: 2rem;">评论系统加载失败，请刷新页面重试</p>';
            }
        };
        document.head.appendChild(script);
    }

    function initTwikoo() {
        const commentEl = document.getElementById('tcomment');
        if (!commentEl) {
            console.warn('评论容器未找到');
            return;
        }

        commentEl.classList.remove('loading');

        try {
            twikoo.init({
                envId: 'https://superb-salamander-e730b6.netlify.app/.netlify/functions/twikoo',
                el: '#tcomment',
                lang: 'zh-CN',
                path: location.pathname,
                onCommentLoaded: function () {
                    console.log('评论加载完成');
                },
                onError: function(err) {
                    console.error('Twikoo 初始化失败:', err);
                    commentEl.innerHTML = '<p style="text-align: center; color: #f56565; padding: 2rem;">评论系统初始化失败，请检查网络连接</p>';
                }
            });
            window.twikooLoaded = true;
        } catch (error) {
            console.error('Twikoo 初始化异常:', error);
            commentEl.innerHTML = '<p style="text-align: center; color: #f56565; padding: 2rem;">评论系统初始化异常</p>';
        }
    }

    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', loadTwikoo);
    } else {
        loadTwikoo();
    }
})();
</script>
<!--
  Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to
  deal in the Software without restriction, including without limitation the
  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
  sell copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  IN THE SOFTWARE.
-->

<!-- Render date of last update -->


<!-- Render date of creation -->


<!-- ---------------------------------------------------------------------- -->

<!-- Render authors -->


<!-- ---------------------------------------------------------------------- -->

<!-- Render committers from GitHub -->


<!-- Render committers from GitLab -->


<!-- Render committers -->


<!-- ---------------------------------------------------------------------- -->

<!-- Determine date of last update -->

  

  <!-- Determine date of creation -->
  


<!-- Source file information -->

<!--
  Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to
  deal in the Software without restriction, including without limitation the
  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
  sell copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  IN THE SOFTWARE.
-->

<!-- Determine feedback configuration -->

  


<!-- Determine whether to show feedback -->


<!-- Was this page helpful? -->

  <form class="md-feedback" name="feedback" hidden>
    <fieldset>
      <legend class="md-feedback__title">
        此页面有帮助吗？
      </legend>
      <div class="md-feedback__inner">

        <!-- Feedback ratings -->
        <div class="md-feedback__list">
          
            <button
              class="md-feedback__icon md-icon"
              type="submit"
              title="This page was helpful"
              data-md-value="1"
            >
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 9v12H1V9zm4 12a2 2 0 0 1-2-2V9c0-.55.22-1.05.59-1.41L14.17 1l1.06 1.06c.27.27.44.64.44 1.05l-.03.32L14.69 8H21a2 2 0 0 1 2 2v2c0 .26-.05.5-.14.73l-3.02 7.05C19.54 20.5 18.83 21 18 21zm0-2h9.03L21 12v-2h-8.79l1.13-5.32L9 9.03z"/></svg>
            </button>
          
            <button
              class="md-feedback__icon md-icon"
              type="submit"
              title="This page could be improved"
              data-md-value="0"
            >
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 15V3h4v12zM15 3a2 2 0 0 1 2 2v10c0 .55-.22 1.05-.59 1.41L9.83 23l-1.06-1.06c-.27-.27-.44-.64-.44-1.06l.03-.31.95-4.57H3a2 2 0 0 1-2-2v-2c0-.26.05-.5.14-.73l3.02-7.05C4.46 3.5 5.17 3 6 3zm0 2H5.97L3 12v2h8.78l-1.13 5.32L15 14.97z"/></svg>
            </button>
          
        </div>

        <!-- Feedback rating notes (shown after submission) -->
        <div class="md-feedback__note">
          
            <div data-md-value="1" hidden>
              

              <!-- Determine title -->
              
                
              

              <!-- Replace {url} and {title} placeholders in note -->
              谢谢你的反馈！
            </div>
          
            <div data-md-value="0" hidden>
              

              <!-- Determine title -->
              
                
              

              <!-- Replace {url} and {title} placeholders in note -->
              Thanks for your feedback! Help us improve this page by using our <a href="https://marketingplatform.google.com/about/analytics/" target="_blank" rel="noopener">feedback form</a>.
            </div>
          
        </div>
      </div>
    </fieldset>
  </form>

<!--
  Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to
  deal in the Software without restriction, including without limitation the
  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
  sell copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  IN THE SOFTWARE.
-->

<!-- Comment system -->





                
              </article>
            </div>
          
          
  <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>

<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
          <button type="button" class="md-top md-icon" data-md-component="top" hidden>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
  回到页面顶部
</button>
        
      </main>
      
        <!-- Footer -->
<footer class="md-footer">
  <!-- Link to previous and/or next page - 移到最上面 -->
  
    
      
      <nav
        class="md-footer__inner md-grid"
        aria-label="页脚"
        
      >
        <!-- Link to previous page -->
        
          
          <a
            href="../shubiao/"
            class="md-footer__link md-footer__link--prev"
            aria-label="上一页: JS实现鼠标样式"
          >
            <div class="md-footer__button md-icon">
              
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
            </div>
            <div class="md-footer__title">
              <span class="md-footer__direction">上一页</span>
              <div class="md-ellipsis">JS实现鼠标样式</div>
            </div>
          </a>
        

        <!-- Link to next page -->
        
          
          <a
            href="../mkpdf/"
            class="md-footer__link md-footer__link--next"
            aria-label="下一页: 嵌入PDF文件"
          >
            <div class="md-footer__title">
              <span class="md-footer__direction">下一页</span>
              <div class="md-ellipsis">嵌入PDF文件</div>
            </div>
            <div class="md-footer__button md-icon">
              
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
            </div>
          </a>
        
      </nav>
    
  

  <!-- Further information -->
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="footer-wrapper">
        <!-- 访问统计区域 -->
        <div class="footer-content">
          <div class="footer-visit-count">
            <div class="footer-item">
              <span>本站访问量：</span>
              <span id="finicount_views" class="footer-highlight"></span>
            </div>

            <div class="footer-item">
              <a
                href="https://icp.gov.moe/?keyword=20230640"
                target="_blank"
                rel="noopener noreferrer"
                class="icp-link"
              >萌ICP备20230640号</a>
            </div>

            <div class="footer-item runtime-info">
              <span>本站已经运行</span>
              <span id="box1" class="footer-highlight"></span>
            </div>
          </div>
        </div>

        <!-- 移动端简洁布局 (仿 footercopy.html) -->
        <div class="footer-visit-count-mobile">
          <span>本站访问量：</span>
          <span id="finicount_views_mobile" class="footer-highlight"></span>
          |
          <a
            href="https://icp.gov.moe/?keyword=20230640"
            target="_blank"
            rel="noopener noreferrer"
            class="icp-link"
          >萌ICP备20230640号</a>
          <!-- |&nbsp; -->
          <span class="runtime-info">
            <span>本站已经运行</span>
            <span id="box1_mobile"></span>
          </span>
        </div>
        <!-- 版权信息和社交媒体水平布局 -->
        <div class="footer-bottom-section">
          <div class="md-footer-copyright">
            <p>Copyright © 2022-2025 Wcowin</p>
            <p>Made with <a href="https://squidfunk.github.io/mkdocs-material/" style="color: #518FC1; text-decoration: none;">Material for MkDocs</a></p>
          </div>

          
            <div class="footer-social">
              
<div class="md-social">
  
    
    
    
    
    <a href="https://s1.imagehub.cc/images/2024/02/02/bb9ee71b03ee7a3b87caad5cc4bcebff.jpeg" target="_blank" rel="noopener" title="Wechat" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154m-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4m-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2M563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4m-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6m107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6"/></svg>
    </a>
  
    
    
    
    
    <a href="https://t.me/wecowin" target="_blank" rel="noopener" title="telegram" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M256 8a248 248 0 1 0 0 496 248 248 0 1 0 0-496m115 168.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7.2-.7.3-3.1-1.2-4.4s-3.6-.8-5.1-.5c-2.2.5-37.1 23.5-104.6 69.1-9.9 6.8-18.9 10.1-26.9 9.9-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3.6-4.5 6.7-9 18.4-13.7 72.3-31.5 120.5-52.3 144.6-62.3 68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6.5 9.6 2.9 2 1.7 3.2 4.1 3.5 6.7.5 3.2.6 6.5.4 9.8z"/></svg>
    </a>
  
    
    
    
    
      
      
    
    <a href="https://twitter.com/wcowin_" target="_blank" rel="noopener" title="twitter.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M357.2 48h70.6L273.6 224.2 455 464H313L201.7 318.6 74.5 464H3.8l164.9-188.5L-5.2 48h145.6l100.5 132.9zm-24.8 373.8h39.1L119.1 88h-42z"/></svg>
    </a>
  
    
    
    
    
      
      
    
    <a href="https://github.com/Wcowin" target="_blank" rel="noopener" title="github.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
    </a>
  
    
    
    
    
    <a href="mailto:<wangkewen821@gmail.com>" target="_blank" rel="noopener" title="" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M61.4 64C27.5 64 0 91.5 0 125.4c0 .9 0 1.7.1 2.6H0v256c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V128h-.1c0-.9.1-1.7.1-2.6 0-33.9-27.5-61.4-61.4-61.4zM464 192.3V384c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192.3l154.8 117.4c31.4 23.9 74.9 23.9 106.4 0zM48 125.4c0-7.4 6-13.4 13.4-13.4h389.2c7.4 0 13.4 6 13.4 13.4 0 4.2-2 8.2-5.3 10.7L280.2 271.5c-14.3 10.8-34.1 10.8-48.4 0L53.3 136.1c-3.3-2.5-5.3-6.5-5.3-10.7"/></svg>
    </a>
  
    
    
    
    
      
      
    
    <a href="https://space.bilibili.com/1407028951/lists/4566631?type=series" target="_blank" rel="noopener" title="space.bilibili.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1-17.2 17-39.1 25.9-65.5 26.7H92c-26.4-.8-48.2-9.8-65.3-27.2S.7 396.5 0 368.2V169.8c.8-26 9.7-47.6 26.7-65.7C43.8 87.8 65.5 78.8 92 78h29.4L96 52.2c-5.7-5.7-8.6-13-8.6-21.8S90.3 14.3 96 8.6 109 0 117.9 0s16.1 2.9 21.9 8.6L213.1 78h88l74.5-69.4C381.7 2.9 389.2 0 398 0s16.1 2.9 21.9 8.6c5.7 5.7 8.6 13 8.6 21.8s-2.9 16.1-8.6 21.8L394.6 78h29.3c26.4.8 48 9.8 64.7 26.1m-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5-5.2-6.1-14-9.4-22.7-9.8H96c-9.6.4-17.4 3.7-23.6 9.8-6.1 6.1-9.4 13.9-9.8 23.5v194.4c0 9.2 3.3 17 9.8 23.5s14.4 9.8 23.6 9.8h320.4c9.2 0 17-3.3 23.3-9.8s9.7-14.3 10.1-23.5zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2-6.2 6.3-14 9.5-23.6 9.5s-17.5-3.2-23.6-9.5-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2s13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10m191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2s-14 9.5-23.6 9.5-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2s14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10"/></svg>
    </a>
  
</div>
            </div>
          
        </div>
      </div>

      <!-- 页脚脚本部分 - 优化版本 -->

      <!-- 翻译功能脚本 - 只加载一次 -->
      <!-- <script>
        // 检查翻译是否已初始化，避免重复加载
        if (!window.translateInitialized) {
          // 动态加载翻译脚本
          const translateScript = document.createElement('script');
          translateScript.src = 'https://cdn.staticfile.net/translate.js/3.12.0/translate.js';
          translateScript.onload = function() {
            // 翻译配置
            translate.ignore.class.push('md-select', 'footer-highlight', 'md-footer-copyright');
            
            translate.nomenclature.append('chinese_simplified','english',`
              快讯=Newsflash
              访问量=Page Views
              本站已经运行=Site has been running
              天=days
              时=hours
              分=minutes
              秒=seconds
              萌ICP备=Moe ICP
              版权所有=Copyright
              制作工具=Made with
            `);

            translate.language.setLocal('chinese_simplified');
            translate.setAutoDiscriminateLocalLanguage();
            translate.selectLanguageTag.show = false;
            translate.service.use('client.edge');
            translate.execute();
            
            window.translateInitialized = true;
            console.log('翻译功能已初始化');
          };
          document.head.appendChild(translateScript);
        }
      </script> -->

      <script>
        (function() {
          // 全局状态管理，避免重复初始化
          if (window.footerInitialized) {
            console.log('页脚已初始化，跳过重复执行');
            return;
          }
          
          // 性能优化：使用 RequestAnimationFrame 优化计时器
          let animationFrameId;
          let lastUpdateTime = 0;
          const UPDATE_INTERVAL = 1000; // 1秒更新一次
          
          function timingTime() {
            const start = "2022-10-20T00:00:00";
            const startTime = new Date(start).getTime();
            const now = Date.now();
            let diff = Math.floor((now - startTime) / 1000);
            const days = Math.floor(diff / 86400);
            diff %= 86400;
            const hours = Math.floor(diff / 3600);
            diff %= 3600;
            const minutes = Math.floor(diff / 60);
            const seconds = diff % 60;
            return `${days}天${hours}时${minutes}分${seconds}秒`;
          }

          // 优化的时间更新函数 - 使用 RAF 提升性能
          function updateTime(timestamp) {
            if (timestamp - lastUpdateTime >= UPDATE_INTERVAL) {
              const el = document.getElementById("box1");
              const elMobile = document.getElementById("box1_mobile");
              const time = timingTime();

              if (el) el.textContent = time;
              if (elMobile) elMobile.textContent = time;
              
              lastUpdateTime = timestamp;
            }
            
            animationFrameId = requestAnimationFrame(updateTime);
          }

          // 防抖的访问量计数器加载
          let counterLoadTimeout;
          async function loadVisitCounter() {
            // 清除之前的超时
            if (counterLoadTimeout) {
              clearTimeout(counterLoadTimeout);
            }
            
            // 防抖延迟加载
            counterLoadTimeout = setTimeout(async () => {
              try {
                // 检查是否已经加载
                if (window.finicounterLoaded) {
                  console.log('计数器已加载，跳过重复加载');
                  return;
                }
                
                const script = document.createElement('script');
                script.src = '//finicounter.eu.org/finicounter.js';
                script.async = true;
                script.onload = () => {
                  window.finicounterLoaded = true;
                  console.log('访问量计数器加载完成');
                };
                script.onerror = function() {
                  console.log('访问量计数器加载失败，使用备用显示');
                  const desktop = document.getElementById("finicount_views");
                  const mobile = document.getElementById("finicount_views_mobile");
                  if (desktop) desktop.textContent = '统计中...';
                  if (mobile) mobile.textContent = '统计中...';
                };
                document.head.appendChild(script);
              } catch (e) {
                console.log('访问量计数器初始化失败:', e);
              }
            }, 300); // 300ms 防抖延迟
          }

          // 优化的访问量同步 - 使用节流
          let syncThrottleTimeout;
          function syncVisitCount() {
            if (syncThrottleTimeout) return;
            
            syncThrottleTimeout = setTimeout(() => {
              const desktop = document.getElementById("finicount_views");
              const mobile = document.getElementById("finicount_views_mobile");
              if (desktop && mobile && desktop.textContent && desktop.textContent !== '加载中...') {
                mobile.textContent = desktop.textContent;
              }
              syncThrottleTimeout = null;
            }, 100);
          }

          // 观察器设置 - 添加错误处理
          function setupVisitCountObserver() {
            try {
              if (window._visitCountObserver) {
                window._visitCountObserver.disconnect();
              }
              
              const visitCountTarget = document.getElementById("finicount_views");
              if (visitCountTarget) {
                window._visitCountObserver = new MutationObserver(syncVisitCount);
                window._visitCountObserver.observe(visitCountTarget, { 
                  childList: true, 
                  subtree: true,
                  characterData: true 
                });
              }
            } catch (e) {
              console.log('访问量监听器设置失败:', e);
            }
          }

          // 清理函数 - 完善资源清理
          function cleanup() {
            // 清除动画帧
            if (animationFrameId) {
              cancelAnimationFrame(animationFrameId);
              animationFrameId = null;
            }
            
            // 清除超时器
            if (counterLoadTimeout) {
              clearTimeout(counterLoadTimeout);
              counterLoadTimeout = null;
            }
            
            if (syncThrottleTimeout) {
              clearTimeout(syncThrottleTimeout);
              syncThrottleTimeout = null;
            }
            
            // 清除观察器
            if (window._visitCountObserver) {
              window._visitCountObserver.disconnect();
              window._visitCountObserver = null;
            }
            
            console.log('页脚资源已清理');
          }

          // 初始化函数 - 添加性能监控
          function init() {
            const startTime = performance.now();
            
            cleanup();
            
            // 启动优化的计时器
            animationFrameId = requestAnimationFrame(updateTime);

            // 延迟加载访问量计数器
            setTimeout(loadVisitCounter, 500);

            // 设置访问量同步
            setTimeout(setupVisitCountObserver, 600);

            const endTime = performance.now();
            console.log(`页脚初始化完成，耗时: ${(endTime - startTime).toFixed(2)}ms`);
          }

          // 页面导航处理 - 简化逻辑
          function handleNavigation() {
            // 延迟执行，确保 DOM 更新完成
            setTimeout(() => {
              console.log('页面导航检测到，重新初始化页脚');
              init();
            }, 100);
          }

          // 统一的导航事件处理
          if (typeof window.document$ !== 'undefined' && !window.document$.isStopped) {
            // Material for MkDocs 即时导航
            window.document$.subscribe(handleNavigation);
          } else {
            // 标准页面加载
            if (document.readyState === 'loading') {
              document.addEventListener('DOMContentLoaded', init);
            } else {
              init();
            }
          }

          // 页面卸载清理
          window.addEventListener('beforeunload', cleanup);
          
          // 标记初始化完成
          window.footerInitialized = true;
        })();
      </script>

      <!-- 优化后的样式 - 移除重复和未使用的样式 -->
      <style>
        /* 页脚背景 - 简化版本 */
        .md-footer {
          background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        }
        .md-footer-meta {
          background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        }

        /* 核心布局样式 */
        .footer-wrapper {
          width: 100%;
          padding: 0.2rem 0;
          text-align: center;
        }

        .footer-bottom-section {
          max-width: 900px;
          margin: 0.4rem auto 0;
          padding: 0.4rem 1rem;
          border-top: 1px solid rgba(255, 255, 255, 0.15);
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .footer-content {
          max-width: 900px;
          margin: 0 auto;
          padding: 0.4rem 0 0;
        }

        /* 访问统计样式 */
        .footer-visit-count {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0.3rem;
          font-size: 0.75rem;
          color: var(--md-footer-fg-color--light);
        }

        .footer-item {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0.4rem 0.8rem;
          border-radius: 16px;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.15);
          backdrop-filter: blur(10px);
          min-width: 160px;
          font-size: 0.8rem;
          transition: all 0.2s ease;
          will-change: transform; /* 优化动画性能 */
        }

        .footer-highlight {
          color: #C2C4C9;
          font-weight: 600;
        }

        /* 移动端适配 */
        @media (max-width: 76.1875em) {
          .footer-visit-count { display: none; }
          
          .footer-visit-count-mobile {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 0.4em 0.8em;
            padding: 0.2em 0;
            font-size: 0.75rem;
            color: var(--md-footer-fg-color--light);
            text-align: center;
          }

          .footer-bottom-section {
            flex-direction: column;
            gap: 0.6rem;
            text-align: center;
          }
        }

        @media (min-width: 76.1875em) {
          .footer-visit-count-mobile { display: none; }
          .footer-visit-count {
            flex-direction: row;
            justify-content: center;
            gap: 2rem;
          }
        }

        /* 其他必要样式保持不变 */
        .md-footer-copyright {
          text-align: left;
          font-size: 0.75rem;
          opacity: 0.8;
          line-height: 1.2;
        }

        .footer-social {
          display: flex;
          gap: 0.3rem;
          align-items: center;
        }

        .icp-link {
          color: inherit;
          text-decoration: none;
        }
      </style>
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    
      
      <script id="__config" type="application/json">{"base": "../../..", "features": ["announce.dismiss", "navigation.tracking", "navigation.tabs", "navigation.sections", "navigation.top", "navigation.footer", "search.suggest", "search.highlight", "search.share", "navigation.expand", "navigation.indexes", "content.tabs.link", "content.tooltips", "content.code.copy", "content.action.edit", "content.action.view", "content.code.annotate"], "search": "../../../assets/javascripts/workers/search.973d3a69.min.js", "tags": null, "translations": {"clipboard.copied": "\u5df2\u590d\u5236", "clipboard.copy": "\u590d\u5236", "search.result.more.one": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.more.other": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 # \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.none": "\u6ca1\u6709\u627e\u5230\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.one": "\u627e\u5230 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.other": "# \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.placeholder": "\u952e\u5165\u4ee5\u5f00\u59cb\u641c\u7d22", "search.result.term.missing": "\u7f3a\u5c11", "select.version": "\u9009\u62e9\u5f53\u524d\u7248\u672c"}, "version": null}</script>
    
    
      <script src="../../../assets/javascripts/bundle.f55a23d4.min.js"></script>
      
        <script src="../../../javascripts/glm-config.js"></script>
      
        <script src="../../../javascripts/glm-translate.js"></script>
      
        <script src="../../../javascripts/unified-instant-handler.js"></script>
      
        <script src="../../../javascripts/extra.js"></script>
      
        <script src="https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/javascripts/mathjax.js"></script>
      
        <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
      
        <script src="https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/javascripts/view.js"></script>
      
    
  </body>
</html>